{"_id":"@uifabric/merge-styles","_rev":"218-bae99d43c32c22b28912900cf5ed58c0","name":"@uifabric/merge-styles","dist-tags":{"beta":"7.0.0-alpha034","next":"7.0.0-rc002","lts":"6.19.4","latest":"7.20.2"},"versions":{"5.0.0-beta.2":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.2","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.2","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"25a9ba103adec2be96c6120647772ab54a668e2c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.2.tgz","integrity":"sha512-TdpRxzgueddcKfW734PCKWmYPVkwiPueeoXniY4YgS16FI4V47KdEX/U3Nm3Svc3XDP4XNrBhlIAZHCg2HLyuw==","signatures":[{"sig":"MEQCIA8SfmqWcSE6Fp8Yad5Q9cAA6avPm2fJzS+fhBV4nofdAiARkI+B/GyiQZS90dx3cPXMB7rVInOCtYH2u8JEHXn7yQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"gulp clean","start":"node node_modules/webpack-dev-server/bin/webpack-dev-server.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"devDependencies":{"gulp":"~3.9.1","mocha":"^3.3.0","react":"^15.4.2","sinon":"^2.3.2","enzyme":"^2.7.0","es6-map":"^0.1.5","react-dom":"^15.4.2","typescript":"2.4.2","@types/chai":"3.4.35","es6-promise":"^4.1.0","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/enzyme":"2.8.0","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","source-map-loader":"^0.2.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","react-addons-test-utils":"^15.4.2","webpack-bundle-analyzer":"^2.2.1","@microsoft/web-library-build":"^3.2.1","office-ui-fabric-react-tslint":"^5.0.0-0","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.2.tgz_1503620872457_0.8020287102553993","host":"s3://npm-registry-packages"}},"5.0.0-beta.3":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.3","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.3","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b2fad580961965001929afec78283233a50ea6be","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.3.tgz","integrity":"sha512-t9GyQEN3lWLzOhriwnAO3DlkcyAlK9Yq7oqbSKncK5ka09FtbmzwryARloav6YC82LANcjcsynwfW1McwYtJ+w==","signatures":[{"sig":"MEUCIQDdpie2q+0hNdrR+Mwvl4Wvh4QESgKi5gTRCYVkxm3pegIgIbNcP7G4ifcjj+REPkf3ZexaBoGmGNfV2+aOh3cJUK4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"gulp clean","start":"node node_modules/webpack-dev-server/bin/webpack-dev-server.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"devDependencies":{"gulp":"~3.9.1","mocha":"^3.3.0","react":"^15.4.2","sinon":"^2.3.2","enzyme":"^2.7.0","es6-map":"^0.1.5","react-dom":"^15.4.2","typescript":"2.4.2","@types/chai":"3.4.35","es6-promise":"^4.1.0","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/enzyme":"2.8.0","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","source-map-loader":"^0.2.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","react-addons-test-utils":"^15.4.2","webpack-bundle-analyzer":"^2.2.1","@microsoft/web-library-build":"^3.2.1","office-ui-fabric-react-tslint":"5.0.0-beta.3","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.3.tgz_1503622293097_0.007867286214604974","host":"s3://npm-registry-packages"}},"5.0.0-beta.4":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.4","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.4","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e3767ee7079a58b0ee3df7b9b660ecf3ab5d0ca4","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.4.tgz","integrity":"sha512-J/8kpUW4bKbEyxiBuFrxMYqwd+GxGCs+bA1KTTH7cZTPlCYd1NaoNwLGaEAmGWNafm6EpNFjMr5ONkYG2eT2hQ==","signatures":[{"sig":"MEYCIQDUQRXENrHCo6D1V+lcXZbq7U93NxP/1/wF1fA851ec8wIhAPSaErzk9AdRI10tSK2UZgTFTSrdXPhL7uSsgViwXKkU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/chai":"3.4.35","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/enzyme":"2.8.0","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.4","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.4.tgz_1504054498093_0.9506731566507369","host":"s3://npm-registry-packages"}},"5.0.0-beta.5":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.5","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.5","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"10a7128a7ef61d4269f092a8ca50d6f7b7f77c9b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.5.tgz","integrity":"sha512-jzp1IK5eKTVgLSl1K9a/8n33fju93B67qNhgMOhPUFS96rfZoHSguGfNhtmsV0Rp6imeaC/UDqPIAUvvh1pRRQ==","signatures":[{"sig":"MEYCIQC1LHaVSknPGE+psXVRgN4oyENszD2376hYVVtmZIAp8QIhAJxRt1rjKSbfaivz+uXqUimjch69d/O4YdDT0/li15va","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/chai":"3.4.35","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/enzyme":"2.8.0","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.5","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.5.tgz_1504136384919_0.38304989133030176","host":"s3://npm-registry-packages"}},"5.0.0-beta.6":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.6","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.6","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9b5bf515fd8a70ffabfcf0498bf0501f95251d11","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.6.tgz","integrity":"sha512-/pf88+DgjLn5AhtoJmYkmbUGvEa7djx5qAWvrjr6xj0kqUiweCxJGKhDqLkOd0uqr5ynnHSfnwSIGPCxS/pxgA==","signatures":[{"sig":"MEYCIQDMOltTgcFJiOv6rnsnKR/p6yjySVtG8joRwVWBfFG57AIhAN9tzyJsReqNnLS3io6k6kXWrjAl36bR2QHVtBIdvLul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.6","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.6.tgz_1504286466683_0.7221840398851782","host":"s3://npm-registry-packages"}},"5.0.0-beta.7":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.7","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.7","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9adecfe3adde5cc2345e667a9337ab0e204a33ac","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.7.tgz","integrity":"sha512-hi7bkzia/1cm9FKCSIkrPQwCbszTCwJMKqWHM84PJGWmaBloXjIVEPLbxcK3AJpZL0uL0RsNjModd+YQA2OMcw==","signatures":[{"sig":"MEUCIQDnktx3nQCVT2zfZuSUwxZvpcJNhNYE1ACJnpdWJcYCBgIgQ2JQ+T4W4gRZu6sQ6kPMK+WJpypOzG+9q7uEVXMtRqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.7","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.7.tgz_1504287891487_0.9914371485356241","host":"s3://npm-registry-packages"}},"5.0.0-beta.8":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.8","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.8","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d066fada0b0af2ec9dbcfa0e23a143e9f80de21d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.8.tgz","integrity":"sha512-7h3Z5j89+Wx1DuxJw84fXBNfZnZt9hpRg8MAU1bhC14Kpd2clHzAj6NYVx5FkKfuAY94r433Fq2mrD+i6Thuow==","signatures":[{"sig":"MEQCIFaQ77zuPfRk7DQXQdKQV/oHBnSRsdUSEHqOSnR2KkmJAiBUf05kYaupPku8Bi5CVs/6j7M8A9LtQXqhi/hE23mumA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.8","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.8.tgz_1504303959936_0.6964501077309251","host":"s3://npm-registry-packages"}},"5.0.0-beta.9":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.9","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.9","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"5f72711bcb0c8db31d9c318744601d918fdb0910","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.9.tgz","integrity":"sha512-KYrGIHc/H3amET8rTGVP3C+AcgakT2AisdSufLiA9DZB1zZjtI7IJQSxPv/mntxfivxlwXx1+zuTAukc3mnVzg==","signatures":[{"sig":"MEUCIQCvwqF6r80dJSPCdbmIDP6nyiYuX7YhGqUUZHZOaPzxAQIgGs2Vrd8DkC6Gp/eU+kmZXTgfI0l4FjocAPzO/XiqMB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.9","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.9.tgz_1504649506358_0.5748646121937782","host":"s3://npm-registry-packages"}},"5.0.0-beta.10":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.10","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.10","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"12dedd73f23cf28de23e45c19e065ea08fb8ee0a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.10.tgz","integrity":"sha512-19XkjGA9TT78azkNR8ubsgL9Hf7d/SIjayhdEKeq0PciWw4nLuZqqGYWSJMWEnqRA84aRAIaCGqxwC0JzaThcQ==","signatures":[{"sig":"MEUCIQCkcAmMvjN8O0Y2geXJt9njWueohI8oNuvtnmfVz2lopwIgKoPhGP1Ou/PWztmH1hQrlaSugRYg3wAfC64hnh1RKBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.10","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.10.tgz_1505174508486_0.37109012389555573","host":"s3://npm-registry-packages"}},"5.0.0-beta.11":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.11","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.11","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ce1f9e3b160fd489e5c62a544c2f1df4f6da3df9","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.11.tgz","integrity":"sha512-6lJ7wSaIpF8iD3AKv69tYvV0daxK8+0tjNlhQA8xjkBiAewlg20cqAshuVdAFDhCKR9jbX3qjRAx79Yd0IHs7A==","signatures":[{"sig":"MEQCIGqmIJgVXt2C3bYZ/fkvzyD8Q8qwtamZm1PavB83fu4iAiAzQLIVZMZHOSmGrAVDMlXMMBuiNuj2DJ4UZOFB/u3i8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.11","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.11.tgz_1505175808642_0.9743362267035991","host":"s3://npm-registry-packages"}},"5.0.0-beta.12":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.12","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.12","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"932f924cb3bce18d24877a82114d2c8f565f4e4c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.12.tgz","integrity":"sha512-UjOoNvkoPORXmjdQEnKPqiPB9w1zLzX7PuINzneyRsT5nGxgEq1k5yDJx9k8YGBVeoSiMD89vJpApJ7ItZd9KQ==","signatures":[{"sig":"MEUCIQCr0aUfSp5SQDQ+Mjq2S1oWWvoQQ1C8ATR6vcCLLGHMzQIgRLrw83a6dMutFN0mZsLunRY4ltFwYw+iS6T2rjJ++c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.12","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.12.tgz_1505176794614_0.6549611140508205","host":"s3://npm-registry-packages"}},"5.0.0-beta.13":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.13","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.13","maintainers":[{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"37ad0517026bbab0f77ab292682254a827f5bd3b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.13.tgz","integrity":"sha512-nk8A/p9HJZmUZFWmUSUMn0VtwLuzC04ffBf4y6RpIG9wBJ7j9MwDD//R5ZFSj0oMLoefc4xcyKJtRe1QdlzsQw==","signatures":[{"sig":"MEYCIQDItRJlSoyuRJktM9ynOOBkbW7WIDrgLq62aIP5wqD9oQIhAOtBy9R/MGM/7WOgXZA8RAs5z/blbsjU3TvU39QVT/lP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"7.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.13","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.13.tgz_1505361178938_0.5792886142153293","host":"s3://npm-registry-packages"}},"5.0.0-beta.14":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.14","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.14","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"96c585c770191453d389b5e04cafeacb86036b13","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.14.tgz","integrity":"sha512-yAiWJ4veuwpZlIEf0VPJlTR4/Ig6wsP0h+XpCOnHV38jNRwuEfQJSu5sBqtpMO4SeaAby1EBRRLo7ZppE5aCrA==","signatures":[{"sig":"MEYCIQCjWw6GLKo1FHD+DfjnodWcE5sUHS61i1MDpUEvKF802AIhAJ90YSX5K2WkHxkUXLYdV3HrGwXnYrHBOGkO4EIu54R6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.14","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.14.tgz_1505756436225_0.5555397656280547","host":"s3://npm-registry-packages"}},"5.0.0-beta.15":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.15","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.15","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bb3640450ef974f314cc3bed0397ec97ceefd94c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.15.tgz","integrity":"sha512-Z9KDdvBXkBy4Sn2ME6tWdxqA7pySzOakMp6RSuEHtFGLcagF+LX1xH/8wk1JVUwTxK6zflBFKt5/rRieBAENhw==","signatures":[{"sig":"MEUCIQCy9W7lIo0nLU3YoJLvDIsu23J1CMjTSl5wWjIdH0U70gIgQK1bej4Fy8oIHhK5x3LbK6S66E/4kktpTj3N4UOjOMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.15","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.15.tgz_1505759671920_0.46276306896470487","host":"s3://npm-registry-packages"}},"5.0.0-beta.16":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.16","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.16","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9a4860e0f86ccf549de4e906c43cde31ebe64dcb","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.16.tgz","integrity":"sha512-ekXqsi3LZYHgvVXCafMgxi4IntPwr+t6H2dAAcSv5Jvq9pfkKZawAZrFMxIK9Dr1R6P/wsTrY+Z0NatY8P74mQ==","signatures":[{"sig":"MEYCIQDUhZuiu4o/zh/ExtAU9fUEJ48OSzVPxONEK+7CMW5WrAIhAKTA7b7avX4//s5qYhvN+Jr1yiJrCT+BEhlf79Wnqfj5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.16","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.16.tgz_1505760655650_0.468499019742012","host":"s3://npm-registry-packages"}},"5.0.0-beta.17":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.17","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.17","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a389e26d9e154c7be7a53066c7064230951c286b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.17.tgz","integrity":"sha512-dFEBqz4UwshUpDxHOX8fqoTuEuJBFUe0EI56PPK2l0pauq8sUXE9vurr4vkJ9AWhthZnzO5fesxkY63CzTHurg==","signatures":[{"sig":"MEYCIQC+Q6/b/VZ9SuiL5/gC8AvRpujOrPh0L4HJCOR77XjAIwIhAN8H4cSf8jxmryRIM+otLyfET4X1QDk3feiuQsyM3Mmz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.17","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.17.tgz_1505957464775_0.7052410827018321","host":"s3://npm-registry-packages"}},"5.0.0-beta.18":{"name":"@uifabric/merge-styles","version":"5.0.0-beta.18","license":"MIT","_id":"@uifabric/merge-styles@5.0.0-beta.18","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7bdb17bf68f88db4e8711caa3037f0ffb4c8701e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0-beta.18.tgz","integrity":"sha512-cQR0YBpWjF4F+ntPwAEfRg1FkHCgXgbManDR/v4nrEvRU+UIhej38nERhuWHkrhdJF1u82qKDOGYyDUifVo9fA==","signatures":[{"sig":"MEUCIQCLp+Wz71pAAtoQ+bb7iAwr4nqx/2feZ7W2Sdu7Uu6LywIgVmtTiCMMTNkW9vbzxCPUBhjU9j0QSz/T0KEzMdx/HFU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"enzyme":"^2.7.0","es6-map":"^0.1.5","@types/jest":"^20.0.8","@types/mocha":"2.2.39","@types/react":"15.0.38","@types/sinon":"2.2.2","es6-weak-map":"^2.0.2","@types/react-dom":"15.5.1","@types/prop-types":"15.5.1","@types/es6-promise":"^0.0.32","@types/webpack-env":"1.13.0","@types/es6-weak-map":"1.2.0","office-ui-fabric-react-tslint":"5.0.0-beta.18","@types/react-addons-test-utils":"0.14.18"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0-beta.18.tgz_1506107176937_0.6937786799389869","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@uifabric/merge-styles","version":"5.0.0","license":"MIT","_id":"@uifabric/merge-styles@5.0.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"cf79c247b371e71a39449078e0fede8207d5b07b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.0.0.tgz","integrity":"sha512-LJi1PaVIi0x/+yfU1usLpranG04UnJaGEZoAXq7hbaULsImXjF1EofltXYWgaBTVOCXQJldQgApLdNQSfV74Ig==","signatures":[{"sig":"MEUCIQCrtb91gmrHquNGoU0DM8+Kz0hPFbfPyZw1TysVnE2yJgIgTbHWg6JtjrAy7fe3X8SFrpiaH3qKtgA1S1OHdfMiduo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"8.4.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.0.0.tgz_1506472974941_0.4379160893149674","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@uifabric/merge-styles","version":"5.1.0","license":"MIT","_id":"@uifabric/merge-styles@5.1.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6722a6dd57fc1e6a7afa442003f30a779b7004d3","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.1.0.tgz","integrity":"sha512-VYCp+ohd8YLiMCIS1DF6I27XUITeN8LvhgQ9/p/vZEp+/8Dg2yjIKsFEmMW6V+82y/RwoTcbGFd6XWtsbih1Ig==","signatures":[{"sig":"MEYCIQCOpYanOlciVCYI/W3bvn6YeOq/JU/gjyUZjEuaJZgmmwIhAKj1h9TMwY4Cm/9rL9LPGneLbvjZBBqPju17Esr75jB+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.1.0.tgz_1506680435005_0.5686930026859045","host":"s3://npm-registry-packages"}},"5.2.0":{"name":"@uifabric/merge-styles","version":"5.2.0","license":"MIT","_id":"@uifabric/merge-styles@5.2.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"68e24a85d0c1a9784540afe00c482d503617e523","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.2.0.tgz","integrity":"sha512-5UNjp2VcxrNHR5JpY5xy6gEQMB5ZanVJUX3fTVsdz3vOKnh6u/LL1FhDAP7dHFSrCRwohT5jPHzbMCXcs3UJlA==","signatures":[{"sig":"MEYCIQCUqHgSBWowclGTI1D5vGzi0kpcucmxsgu6x0S1iGg0qgIhAPiNH4Yjl3vfvIX/aXhKcZ3MyfEi00WUx6shAuRyke1A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.2.0.tgz_1506734806651_0.8400917195249349","host":"s3://npm-registry-packages"}},"5.3.0":{"name":"@uifabric/merge-styles","version":"5.3.0","license":"MIT","_id":"@uifabric/merge-styles@5.3.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"cbd56b44f250459f443791861bb7989ad059231a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.3.0.tgz","integrity":"sha512-MlwzpHJ7sL7LwQTLAFooisAAwRNOxHvJQsokoAGlD8VlO3HhVrRxZGCrNfdsUdMU/9bOfiHPKjm680CyMKubbA==","signatures":[{"sig":"MEYCIQCRCJpYLbBpsfLp0rxb0xtI6bXfdCwGi16XW845oeSMLAIhAI/7lFLmqEg6G1rGu5IjCvf6LR9IzGzdKaB5ETgEk1Uk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.3.0.tgz_1507198673448_0.27463846397586167","host":"s3://npm-registry-packages"}},"5.3.1":{"name":"@uifabric/merge-styles","version":"5.3.1","license":"MIT","_id":"@uifabric/merge-styles@5.3.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9b395e30f27f7576be053b65f2311c465cb8de49","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.3.1.tgz","integrity":"sha512-i2GY/PBQHS9bUaqLu3/E2ZzgFbVEN1T+vOuxCtgL6s49G7BUn3M27zMJxDRU1Wc8xZ7LMDyjaXbLVsnZhHoGng==","signatures":[{"sig":"MEQCIBhDmYe1n/sws6lirlJEusv6sSco5IMzpDeEGqY4KKSWAiAkfxPRUOdGh/1qcleSj4LUUsbh0Hxfc9Wyd/DGKaUssQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.3.1.tgz_1507285133506_0.5964856492355466","host":"s3://npm-registry-packages"}},"5.3.2":{"name":"@uifabric/merge-styles","version":"5.3.2","license":"MIT","_id":"@uifabric/merge-styles@5.3.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"832c178d1c44dd24dc0a0de5119b28882c21cb39","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.3.2.tgz","integrity":"sha512-RHY33Bs6OIS60z8l5taXAps8J7FT4hUkwaM99G3vop4cEAevTYm3RVoYJALT/Q/Ta15QO6X11zqkH2S0J0N7IA==","signatures":[{"sig":"MEQCIDp9yJZbgROsYdNiJfP67SQo0mGXdZLrrL96tZa3i6dgAiA05QzShbdL4ldkiFIoTCN/y8xtiwvU97yBPFymms+O5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.3.2.tgz_1507543698242_0.060481511522084475","host":"s3://npm-registry-packages"}},"5.3.3":{"name":"@uifabric/merge-styles","version":"5.3.3","license":"MIT","_id":"@uifabric/merge-styles@5.3.3","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bcf0a5c4bbb892820048ebbb511cfc974847df33","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.3.3.tgz","integrity":"sha512-SuECX7SmyYbTVDPZcz0tE+5F6/MD6ynze1nonCpRhu2Qt11Ulx/qud6DBtBXXKoHeGJrHrbUjc3yemiDejnlKA==","signatures":[{"sig":"MEYCIQD0zH9BcZObrP7PUc1dIM7Qn6w2MxDK9rBkqnCgn1qjwAIhAN9hi6Va/etpkkg2G6/bZVBE10A1vMXQMhjXWegMUUnB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.3.3.tgz_1507858570624_0.9303328625392169","host":"s3://npm-registry-packages"}},"5.4.0":{"name":"@uifabric/merge-styles","version":"5.4.0","license":"MIT","_id":"@uifabric/merge-styles@5.4.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f97416584ea865e49ae911bad30b37936518f1c0","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.4.0.tgz","integrity":"sha512-u96gLbtiUsPcRjTBcEK7KuWuYwmKrq6tosYV3JcB4t2BIusEog5bIcXwRueH/511XNDNTL/NDCjYHgaxGuAULg==","signatures":[{"sig":"MEUCIGQbd5mIjJjcotveP0hA3u9TK1hMAZ/YVDeIKiDybGzQAiEAkIYzJzILAueIiKmr7ga+TKrCc5rmZpI0dMvbggLkmXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.4.0.tgz_1507867227700_0.03763183508999646","host":"s3://npm-registry-packages"}},"5.4.1":{"name":"@uifabric/merge-styles","version":"5.4.1","license":"MIT","_id":"@uifabric/merge-styles@5.4.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b4ca9a6b29ce7e78f779d6c912564dd67c950e22","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.4.1.tgz","integrity":"sha512-xXwP5gMwTXjBVMcJBPVDm25/ZINzBzIpweogvxfrPwhINV13KFb0NCWweHAOR9tv32LWcSVJ5aaqetK2Q4qqVg==","signatures":[{"sig":"MEYCIQDz7d0AhYxKhlTKrAI+Bz9bAqMqT5yBFM9F+wy97QB74AIhAOn208PQL5/jfuH19+ieI3TOefwPEuJuLGZq7BjPST04","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.4.1.tgz_1508260672164_0.11473929858766496","host":"s3://npm-registry-packages"}},"5.4.2":{"name":"@uifabric/merge-styles","version":"5.4.2","license":"MIT","_id":"@uifabric/merge-styles@5.4.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a744a91f3b4a3bc70bc15009bf6215c60db4eb26","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.4.2.tgz","integrity":"sha512-qNe3nGLF/bq+6SEnzK9BMTNZo1tsDQ/rixhz95X/7+L4VFo2md/VqmNW87DXxJO9BXxwrlNbek/N2gcXWdbq9w==","signatures":[{"sig":"MEUCIQDFuF2XtZnqARUUuluWNe1Ye6+Z6q4QHvaBeWF1lX0/eQIgU+ila270/pCzYe2R6wxohUl4N3QI+8jq09dC5Y0tb8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.4.2.tgz_1508524940118_0.6463663894683123","host":"s3://npm-registry-packages"}},"5.5.0":{"name":"@uifabric/merge-styles","version":"5.5.0","license":"MIT","_id":"@uifabric/merge-styles@5.5.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f51b7dc6f43b57d28b5fd3204af93d99909d61f6","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.5.0.tgz","integrity":"sha512-bO0znot65lsAvf6z18BnZ1NtyDMMCxCBSdYN5ykiPisiqbJjgxKP5SAIF9FYuyj3VOIa6GX8g/xYv3KkMVA2DQ==","signatures":[{"sig":"MEQCIHzsjKtjKmN2vLMN+5FTm9kIkbMhB+tZ0yAHWUFGYR/7AiBe7GFiCBCS1MjWYs2ULHnCfQC+VIqZoL+G84lL9ip9Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.5.0.tgz_1508840479244_0.49710346665233374","host":"s3://npm-registry-packages"}},"5.5.1":{"name":"@uifabric/merge-styles","version":"5.5.1","license":"MIT","_id":"@uifabric/merge-styles@5.5.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"c86236ebba8f28cf5fba53509e428ebe246218a1","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.5.1.tgz","integrity":"sha512-T16obR1JtHZWsOn5B8KvXaduJ07WwARAxMRZ7WiygckpKB55ZO987UhY3N930fLlTanslmiY68dN8hgBHJra+A==","signatures":[{"sig":"MEYCIQDXNQKRmDje+PqkZmJYEQeVpMzHi8efAlOU0ZWQeZfI3gIhAPV8F/cqKC6m3qomgI3asEmsPTdnLBOYvGNqP16YPq1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.0.3","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.5.1.tgz_1509646857368_0.5680477141868323","host":"s3://npm-registry-packages"}},"5.6.0":{"name":"@uifabric/merge-styles","version":"5.6.0","license":"MIT","_id":"@uifabric/merge-styles@5.6.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"50736677b2fc5bcd3f4b0bdb38b7ecabe7f7ab8e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.6.0.tgz","integrity":"sha512-SeHU62hfhNIynSubh08JHi3nNSZjCDxMbJCD6V2hA6HDmxhdGM9r3xaMAikJWnO+bixgBripsNwmAN6bneRMeg==","signatures":[{"sig":"MEQCIDmC8//PLm/MBnAO3jqJOqsU9xPk/KrMniLs4G1IE5IyAiBjHTx2FTfWp73uCY8vP5f2TJlR+XYmUz+VeMcxxeZlnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.6.0.tgz_1510333787674_0.10218773502856493","host":"s3://npm-registry-packages"}},"5.7.0":{"name":"@uifabric/merge-styles","version":"5.7.0","license":"MIT","_id":"@uifabric/merge-styles@5.7.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"426d624d7641cb0f6152cff47b4c9b941fad9ea9","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.7.0.tgz","integrity":"sha512-hS8tvkYk48JTkpKfoIF+kUP/ZefDteBjo7UKd2CLTO1eB+hLEUyKQtUEuiNlfi28cuZ/nracoK/lg7PN+Yv0YA==","signatures":[{"sig":"MEUCIQDWhk1PVymXYNrhPxNZYgOB7XDCJfN/uj5+kyY5QZC6jQIgfgThcEbWhiWhPokuBf7N2auyMTKKAguiMheZEcodWEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.7.0.tgz_1511954657296_0.4818057385273278","host":"s3://npm-registry-packages"}},"5.8.0":{"name":"@uifabric/merge-styles","version":"5.8.0","license":"MIT","_id":"@uifabric/merge-styles@5.8.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a9a1aba59c483f7c75dbbf8234cdf02d09ddcea4","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.8.0.tgz","integrity":"sha512-stjicZel1v/+8KUaxeN8RhGsCvOVcrjr0cVNDlp52IMnTYQqMmAlFUwQfdiDrqiz3T7HEoKxnSSfLFaX3Df9Aw==","signatures":[{"sig":"MEUCIDfMJ1jb5A/nyOuSmouBf60HJE/XJf/qIGjT6nL4FncKAiEAlhYnl9FlknGdUKhzXkS+9BbQTrozGRX6zerUs+LYxHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.8.0.tgz_1512126684320_0.9851568122394383","host":"s3://npm-registry-packages"}},"5.8.1":{"name":"@uifabric/merge-styles","version":"5.8.1","license":"MIT","_id":"@uifabric/merge-styles@5.8.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"2395d288bad546ab9e05797dbf2a1491b1051c10","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.8.1.tgz","integrity":"sha512-mgxb0rMwxJ7LfrPjF4dSUAPJkamlGCjKxzd5nR0wSxde9/k0Sw3zcf4BoefrbR03jnVkdtDXfj1rpq2yYbXXoA==","signatures":[{"sig":"MEYCIQDi2Xdjpelf0IKjh/OgEmyVnrTnmmGKPkULxYvuiO19bAIhAJUgk1+qORQ4q2Xhs9J75Orn3WPcTlM2OrVmOYUfbo75","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.0","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.8.1.tgz_1512991455671_0.028314463095739484","host":"s3://npm-registry-packages"}},"5.9.0":{"name":"@uifabric/merge-styles","version":"5.9.0","license":"MIT","_id":"@uifabric/merge-styles@5.9.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e5b4cd2b316d2e6b8771e50f2d38843ab4a5b853","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.9.0.tgz","integrity":"sha512-TPCSGnyN8paIrFosC080kHfHGdIreiQJu6kcj0+gZlo7WDRFr1Etnge22c73UIUZKZF5Z5jv6yMSwe/eWk2inw==","signatures":[{"sig":"MEUCIQDF7QgQ1Kh9MKzQxEGCRqgR3K2TG/ECfwvxYHvhTk+VOAIgKrSJxYoPx3/0PxxGOM8FjmLyTLPld9IC129Icxi0Mas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.9.0.tgz_1513400850656_0.04937198432162404","host":"s3://npm-registry-packages"}},"5.10.0":{"name":"@uifabric/merge-styles","version":"5.10.0","license":"MIT","_id":"@uifabric/merge-styles@5.10.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e5bd7cbda5e63158546ea70e135b44e3429ade44","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.10.0.tgz","integrity":"sha512-LsU36T5wenvIVfeymVlFB+VVNMiOxONDK/f2myDqp7u01EZgLM8LdtBc06SPDoMgUIhzhJXvBJWXWMEKLV6Grw==","signatures":[{"sig":"MEUCIQCEOfNf8amMeEWRDPWgLb1QrMxhlcbupYfGcRWlKMP3JAIgHtmGEMhJ89sWVr6ygUCza0A/MQjG463jE8TlvAHfUHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.5.1","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.10.0.tgz_1514460240515_0.5152020957320929","host":"s3://npm-registry-packages"}},"5.10.1":{"name":"@uifabric/merge-styles","version":"5.10.1","license":"MIT","_id":"@uifabric/merge-styles@5.10.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"12d4f4c1857b3a97a9ffa9d725dbd46be956f992","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.10.1.tgz","integrity":"sha512-BIiM53RnhyB3bV6+DvUqlLZjUFJawL+M4yiCX8LuAUHu0XDFMJPJfB2BZasHwwX68hIzG76Sd+RKdSezAsLsyA==","signatures":[{"sig":"MEUCIA6c/E0HT081tVJauT9B0SPeS2zblhxMbpVh4o11nhXZAiEA//6uz06m2Aa95PwAJqtIJMeh+hRIo7pWyPaDF3nlBdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.10.1.tgz_1516187494418_0.7181413306389004","host":"s3://npm-registry-packages"}},"5.11.0":{"name":"@uifabric/merge-styles","version":"5.11.0","license":"MIT","_id":"@uifabric/merge-styles@5.11.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"4e456437afffd65ead6bcdbb1d6cbd93e3fed8c7","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.11.0.tgz","integrity":"sha512-/XOXhy2Sv5TDDOxhWukxVcBneljpjlCeYBClBPTXVLFOgBgoMrO/GxfxjGTtqgwZ7vxUEDMvDHtGCxAdaR8sNw==","signatures":[{"sig":"MEUCIAqmfJ6mQvIx0v8RmVKLMGtYoP7oTT8u1gSE8MFGnpCdAiEAgxIX3+CiYin1tgIvNTybHjr2KzTFtE69XpyvDq89S/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.11.0.tgz_1516879402224_0.26973097771406174","host":"s3://npm-registry-packages"}},"5.11.1":{"name":"@uifabric/merge-styles","version":"5.11.1","license":"MIT","_id":"@uifabric/merge-styles@5.11.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ac67596a0d5bc5b4d5c6bf48cc208f4d16951807","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.11.1.tgz","integrity":"sha512-GiI0zdxdn4j6RYocPyGbENaLES/HCq3SFVUi5gyhQ0NwSmd2Ym7RYUzgWmEed3dipj52hUErCLaUC0uQFORUrQ==","signatures":[{"sig":"MEYCIQC7XPMf16o5ZZsBkmLIOepj2a2E9qsfXbqrmW/JcyePDQIhAOKx/GSB0w/r9lbUsyAPheq5oVllaaFttLqXt/1CEL7l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles-5.11.1.tgz_1517915687748_0.1779097409453243","host":"s3://npm-registry-packages"}},"5.11.2":{"name":"@uifabric/merge-styles","version":"5.11.2","license":"MIT","_id":"@uifabric/merge-styles@5.11.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"48ffd37bcfda8bfc8337318dc05e4a38118154e5","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.11.2.tgz","fileCount":176,"integrity":"sha512-Qipbhp1J+yyBSAEDCGWjuv2mdkIEwRFB9qr8kNCew/8t4TNt2V2O8GbMjIqj0ieCOyj8M11rlALOGThOY91z0w==","signatures":[{"sig":"MEYCIQCs9RzDgodnF8lrUcGoZn7MFDPmbG1JnZQIuHDSSc6D/QIhAIzJNTsbht+3b5VHkBv+zanAsto5+mRJT4K59VbrWdVS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":980682},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.11.2_1518002656511_0.6510736119877114","host":"s3://npm-registry-packages"}},"5.12.0":{"name":"@uifabric/merge-styles","version":"5.12.0","license":"MIT","_id":"@uifabric/merge-styles@5.12.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"3e83e219961d28c2a0f61a7c97b8299bc547e36d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.12.0.tgz","fileCount":176,"integrity":"sha512-WPGwfMGMpHvITfQR1YaJPn0vroT3oqgo0Kyif6b3pIsdGOnloqwnGk3BOJyhrZummSLBsfOIbyK8qtwZ+GrFOg==","signatures":[{"sig":"MEYCIQDrvmlyzoB7Zehz/MldbOA5mWJUL5Xg9+ul4D1+KTh5qwIhALb1u+OQr860fyGIgPaSBHRv4t1OAPqcn5j2kz7Bz8xq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":987534},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.12.0_1518646265849_0.17983399056554483","host":"s3://npm-registry-packages"}},"5.12.1":{"name":"@uifabric/merge-styles","version":"5.12.1","license":"MIT","_id":"@uifabric/merge-styles@5.12.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"df9fa7c3d9d8d7421fc4fd5ea79baa8e712e32fb","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.12.1.tgz","fileCount":176,"integrity":"sha512-zXvdxOKKDIF7c36eU/8Cv6kMRSX4Y57f9BqCebS79nPH3LJ6FGX8EiY9pxvNCnDH1tZcUoVbCw0cJRN9YTQx/g==","signatures":[{"sig":"MEUCIGRs7r9add2f/16yHGmfodl0B78+17hbuCaz6z4ZXeJHAiEA5uo82VbCU1Ek27g/9hZYWriEuQqWsdbmucqZycA4lqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":988350},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.12.1_1518780224939_0.14444896451146816","host":"s3://npm-registry-packages"}},"5.12.2":{"name":"@uifabric/merge-styles","version":"5.12.2","license":"MIT","_id":"@uifabric/merge-styles@5.12.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f7ba51a8c36443467c6215b8cad0b9d26f93c032","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.12.2.tgz","fileCount":176,"integrity":"sha512-PVUu9IIa6voT5YvZAfd3GJvHZpTyA6m3WCAqSjCvNScGJN1EdQ9YQjfJpC1FWsUNYcXIBQqLl7YiuAE+aCz99A==","signatures":[{"sig":"MEYCIQCnPLYYLwHgjdMd2FIA8MqBVN4dLwm9Mau+SLHDmLgIGQIhAKMxfm3LMQdaZP2gzKA2EKRMHrWEFgV37FgWBEYVZIzM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":989862},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.12.2_1519211541125_0.6378298559366151","host":"s3://npm-registry-packages"}},"5.13.0":{"name":"@uifabric/merge-styles","version":"5.13.0","license":"MIT","_id":"@uifabric/merge-styles@5.13.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0cdc751d3c593ddf04526f996d48438e60f89666","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.13.0.tgz","fileCount":176,"integrity":"sha512-F45U4pVJbXYmP4pSXdSGa7uq9JhsaYovuA1COb7wXCgv4NWIRqdofTLGFF6rvVddK4hXxWN55ANo2DZUCU+CgA==","signatures":[{"sig":"MEUCIQDEQ7u5Xdzkbd3AN/S11l3/RkdVVNEbcP6jBO4lrr5a6AIgNK4Sf3hQD7Mb+zRg3bBGNMNAgRyn5dSNgbNhN1TqrKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":990393},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.13.0_1519989953029_0.4498577922676843","host":"s3://npm-registry-packages"}},"5.14.0":{"name":"@uifabric/merge-styles","version":"5.14.0","license":"MIT","_id":"@uifabric/merge-styles@5.14.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a11e27a89d4eed53528a56e43d165325e088de4e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.14.0.tgz","fileCount":177,"integrity":"sha512-vUmoMpyxsWGEr0XsCAyGM5tRg2nlQmnGrEEEP1xh8rv+M1YVnux3/E6IN6QvN9UGZZWF4UT1xS3vgPalv/vjyQ==","signatures":[{"sig":"MEYCIQDHi68pmW9+m3FzgZd8QJyS6Y2wWgIkp0r5RIuzrGKbrQIhAKC1y296Ets/TwIrTbw+i+Dlp7Cww7n5wyKKpu+lKtKH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068991},"main":"lib/index.js","module":"lib-es2015/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"6.9.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.14.0_1521947299159_0.44446687465326984","host":"s3://npm-registry-packages"}},"5.14.1":{"name":"@uifabric/merge-styles","version":"5.14.1","license":"MIT","_id":"@uifabric/merge-styles@5.14.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bc09bbb8f4d7ddf1328baeb0f07101263a4d5c6a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.14.1.tgz","fileCount":177,"integrity":"sha512-DSimAIjpSg8RLQk4ps+G/Tt3HLC+qiwUOd72SQ+eJ21/1jrmX9p+U+teNe22sQKqf+oEOtf/su5ZBTt5XMNLNg==","signatures":[{"sig":"MEQCIB3kGzT3XylwaHXVtEOfTfWdw8iSlI4HmEn2NhsRJkW5AiA3WIhHlL0b3IV325SKZ4bSUSkgWppAmG1yQ4QqJf4RHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1074906},"main":"lib/index.js","module":"lib-es2015/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.14.1_1523010371053_0.2538043432887087","host":"s3://npm-registry-packages"}},"5.15.0":{"name":"@uifabric/merge-styles","version":"5.15.0","license":"MIT","_id":"@uifabric/merge-styles@5.15.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bf1c196fd606ecb7b87ff34f40f9850c37a80217","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.0.tgz","fileCount":177,"integrity":"sha512-VwUaVBKbqVbmpcaaKoLbv02B5v7BXhRvsnHOmmnOjSUrKyeZzg1lOwKbk0aoZCpH57lWkdf0RGMZN66imfyaSg==","signatures":[{"sig":"MEUCIGADXU8BS+amQ9odyM/Ld0tc91br8mcEInnlRXyVGSCeAiEA1VvencKZMfaDchnHw3MJb1urroc231bFv7a/MqtyZJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1077872},"main":"lib/index.js","module":"lib-es2015/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.15.0_1523381860592_0.6725772260363612","host":"s3://npm-registry-packages"}},"5.15.1":{"name":"@uifabric/merge-styles","version":"5.15.1","license":"MIT","_id":"@uifabric/merge-styles@5.15.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"98ac25cf086504c8c820a0d1dc19f3f0a723b698","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.1.tgz","fileCount":177,"integrity":"sha512-Uk9+80TEXlAYOE3eqRUPMnGYG8XMLYOpv3lSPcBK3suS7nBFWJdwpQlbuCMyCGVlxKPhHGOAaUU6bKgRs02+Gw==","signatures":[{"sig":"MEUCIEIWaHdnFkWWfvYc5AYGHrFTCDYyi8/cTdIqmuPkOb1OAiEAuI+DNqWj8OxCTjF9cUqv1gHwQ/3DFqdqERDQJZHxGy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1065124,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1HmuCRA9TVsSAnZWagAAwq0P/RWMhTbAb7Z53Qc41ori\nS/6nBEEfHqvTaBpWlqSvnbExJo0wvBtizC5EkhkspekQ9vYipmq3Nn2zB5tn\nfhRfWgcXFvfWl08N6Wj43m+EO3DJDoY+EyGaZ0bbPUuw3euZOdkLippPHU6G\nwb6ZRbWw+5UudmyYBhvhM5DlVfvRKrmJEGJv7gnjY6SV53IXEDjLG82s1tm+\neHtSVrhtUOccsTf2MVUQImn33TrokLg30SnRVx4fSwSXDexJxIXgBK7m1DOl\n/mzOOfRX80rqRcQVdP1tLktc2qXQB42o/EzqaERWoocfMMC74E7glqRAAzDa\nau2uQ3/FhyiIb9ZbTl6YGqMNbd2JD079KZjYebAEKrtfGtII5M3qgGc30O33\nO9urJvyn51fZJ9z6j6lSy56yBjCXAKnRHkuHvhvqcGavk/gZWoHT55XAD1aa\ny9CbV1jH/tqtPg0uJZMuPr698piTY3e4UG1salL65IMvTK5BaUaUratTTM/Z\nP7Zn6ObH0F6nfvgQ3g0zSwbTGk/cOR0UrRpDGb5VuXm8+K8G6liup9fOKqSy\nl+WG97iMit2k+18MHp1PPJVpX858WEqq0H0MEXQGzL7vS8BQfjpcI4RFB3aH\nIJuWbtFp7Bal9dgFLp3MI7kLh8EB8u4Xg6fpOyx2ennjtdcD0DzegNlVam9F\nhUVu\r\n=nIkz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.15.1_1523874221719_0.851876618843435","host":"s3://npm-registry-packages"}},"5.15.2":{"name":"@uifabric/merge-styles","version":"5.15.2","license":"MIT","_id":"@uifabric/merge-styles@5.15.2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"26cee233ca46d8696a17ea193224c5eaff98d474","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.15.2.tgz","fileCount":177,"integrity":"sha512-EF8V6s5vBh7jQ8WH3cCLCpIU6Z0yy05tV0eSY5YKIpQ7BB6E228Ty96U2WvA9ZNCHVM2iyf0ZeX+ooHlEvpKIg==","signatures":[{"sig":"MEUCIQCIB5VC3gDGxqnKM+lqFWEynYEqBuFjjpts5gge8GvBigIgbDLd+BZiyNT/yQfRrRhzvAwiCMmJR6CqzocltdtFMTU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1068867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa1kE6CRA9TVsSAnZWagAAWtIP/2Ww7PGdYrZK9UT/EaTs\n9g7ltozU5jCYGk2UglVgr3irnZG8bDjbbammAIwdxXNr5jA9aTNAIPHoLld9\nB3LBxkqdFjFJ4kXExoQrZ9NXKzu7bf+NWUR4nyk3F5vxLbbtTkzFbXmCfQdW\nvNQWikxko+F29x7v34lHk6GTUCRCXVHpHox/OBM+bcMwzFzruHDbcl1XMOoB\n5IKenzpVQZIHKs2uMyNMiu9jfraijXT3PIddEBIKGvMIsEquRfbgST5ofxAO\nMVBv0wb5IW9N4YHXwBpEN7xMNKJ7khPYUPAC21jYWirxcvizTK3l+vEz7z+I\n/cluaUEPo7rbMQzp1Ea886aYjAiL2jjlpgsdj+0HPY2jqdIzyfmRHN9i5HNi\noWaf9IaP8D1NztECYaQw/ZCQH4QCnfqaEOHNZjRFN1+x2f59eNOG0nLXwY/E\nEpWeiZdvy8O0oDgjHzYLcXgsYovLwfK0ae5xmo5+ZGjAEqrNq3rUbLRpShXB\njvDOEVqUtlt1lksOyH11wFWlj7+wOqDmrQ09TaQ/LZIgXAHYD2PddLLKm6rn\nuONZ1SDX2DrEqsSrz4990Hq+VixJ0VgQHDFLtA1LXBRQqDn9XBpK/MQjH0aV\nIAew5FJ41HpH8QdS2L0m36ASSAaQx2vVSmKnsr8mR6I3xLTkpit9McBB0el6\naLUs\r\n=Iktu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.15.2_1523990840845_0.01829775563444902","host":"s3://npm-registry-packages"}},"5.16.0":{"name":"@uifabric/merge-styles","version":"5.16.0","license":"MIT","_id":"@uifabric/merge-styles@5.16.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"beb1ee29f2c69161ce29b7fe8909547eb439429e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.16.0.tgz","fileCount":177,"integrity":"sha512-9n1geqGfA8X0K+99C0hWn61ZN+yjad9t61HB767sFaIGSY+jti+Jy3KCMtkhlcZBvU/LCufgD/i1pSLnXvZpgQ==","signatures":[{"sig":"MEUCIHBoK43H9MxAV0cJO8niEY8xwkIK+r04vUTxNrgud9PvAiEA97tUk4tP0crXC04GifB4ZWsEkXA3FB4pzFwPIJeQCis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1070035,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3bSJCRA9TVsSAnZWagAABBkP/j8tikE9Mteqv0WYoYLn\nsFWTjbbMPqn7MwTLuWjTm2L1f+U6GFFBJhUbWBURPi/ZkzA9CU5r+AwdcbZz\n8ETdIbhZaC8lBqN6gI3Wj887h+LTgdYNnR12h+ZnKEstkg/zw5la1nC/5oNl\nEldac+wNmxCWxBVD+wuVmZfT7M6E7KsvpZnaup8GRrrGlR1lJ/x7RwqJ9jIa\nPXhdeT4IlGT2bZOzl6TYljiQS87w0UBtrXHX+nfrZGSpjgHQsmvJhBsUH5Ad\n05DR/vmCmk/RWzPv9niufMJTE2mrerMU4cLcyhx8QPspvnqqIUzev+Sjim9D\nbCtid6l/P779Apoz9XcIrSLCTVBXozhPynTKa4ZhVBcC4zGHTt/NyzStrcP0\npRE56SRzSz1wmM36T8irxxWPL1QAcC5OB72V3UjYJZxW9zcL0coFjXyuGGld\nSMxOBWZQkp9Ap/KlVIS6FkBWbr0hiUL2hco4/qFXQ6VrlL4b2JYlmbfLpscJ\n43wi6Cv1YHCMW5kC7UUAB2l6pD5/ry39O23atLO8sJaypRTl2Zii7ZDP5WHd\niIzS+r1HrB+fWZeDYsAeo6jlvZQd/kbNGaBlvmJoCWWQ6go5OwDVdZDkqisV\nud8JGpNZguzsMvxaWRu0JbMOqgYvWGaIYVQsrgBjqY34yr++kfnz2FBuR3n3\ne2WB\r\n=2nKN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.16.0_1524479111836_0.8296472216794091","host":"s3://npm-registry-packages"}},"5.16.1":{"name":"@uifabric/merge-styles","version":"5.16.1","license":"MIT","_id":"@uifabric/merge-styles@5.16.1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d13a40dd07a7baa9068c3297d12131689c94973a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.16.1.tgz","fileCount":177,"integrity":"sha512-AGRDvTMZBX14lHeyPjgx1ROFfpmOFsXJo/LRR/YqkS3aop7C13V0EUoCJ8y/j+D/YOHgP00Lf6Ic3npLK6uLyg==","signatures":[{"sig":"MEYCIQC4v3eU+Vna8ig9QIX3CEyWntHAa6qJgCDP451N81QKUAIhAP/rAbeQBcQx+F8JfnnR+ja9VKVBK6FkEquVyqkO9qsA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1078593,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4BLpCRA9TVsSAnZWagAAwkQQAJ35AKU3N8/Y2H4He9j5\nMJWeTosVtkdr8yF8sWWqKs1PeER8pIntZg1ABHffkuE9NKkmy0N2O+NDBMzb\nnU7Rbm0Ki+Q88KY+QGIbHXt6YX5iTxtP7AAnZ4MzFmQ/eOhaF0LkZxlDkTs6\ne9mre+YK/XlWOMTEiliB51S5CVK/SJXUQJYbUrdpudQ7nPPgnAI8XAkVlB7p\nAjuJLfQSKZTWNjr7guYu1CraNyiY6ORYapfL2+AjV61HnIQAdA+wouBWWt3W\npou5C+gnJrtCu4pA4ytacktxXV2Co7yPaOgsnteKoonAJszi8hsgHWpkyUEy\nENQOd3GBj60wNz2m3msmTwHL5ouQeAT2LimKcGj3xJjRLAWU2Z01hYBccK+p\nNPTewm+aKMEmIg+6UGTvpnfjmoANHdqAlJ8Q3NNJwIZOYpmhPh5GjzwgYztV\n0Af8VcbDdInphdNxABCeaQjOIuX4KgfjslE6vA193AYC3k9HjphbtulMPZu4\n4PjJPvewFSrakrzXkH4xO1h7g/whkTC/DTdWcOeR+I1gCEgcbr6Y/ayDzC5i\nGET11XOC9z0QVfCRliMt8AY/COVAvVZgwYbckd1GjgToEOUaffVKi+zTsu7i\nDvFcMu6G+Jai9EzUia/2Y1DQyXbXjgHjvspZIqwhjuySEKpZiZC+TTfn7F7g\nMcKD\r\n=ZT9G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.16.1_1524634342692_0.12828600545498725","host":"s3://npm-registry-packages"}},"5.17.0":{"name":"@uifabric/merge-styles","version":"5.17.0","license":"MIT","_id":"@uifabric/merge-styles@5.17.0","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"96de616cb9fa5c05a79ac18ff96db9fe5644f2d2","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.0.tgz","fileCount":177,"integrity":"sha512-xA4sbfKgOAx42gD56/ch8hWI6b7Gp70JM0kMnTIyF0oPWd12Lkvm5IVy1QZWxPE9YENIj5fn/mFWV2qkWKnJxQ==","signatures":[{"sig":"MEUCIBjbm5RkgUVQM6J9qp4cVBN6GYvSbZ+YUHPcREwLf7SLAiEAiA5lDrChJQ4I8zkLhq0Vd5D6L3ReIChVR5w2CAAzkh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1081688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4aYeCRA9TVsSAnZWagAA3wcQAJXsO8pugC0M3OC31gSn\njD3T9YeDJczlwqgSF+SjqjHTL9vtLQdQfqDnCAkCQRhTrRfndymJmUPShPAo\nPWA7xh79NiTMVvFltuyrh6BRc5JMykD68tOfFrP5Tj7jquSnzeST4ELN/MJ2\nQ8qgsMx6/SbmiKhr1PiZNDXmm1Uc0J41D2TcP2ZMFQENPefbIRI+aKRZS3MP\nqQbmLk3mP2E9qFohkuH4UooFLiid2r30DivuqyP47GEgXPLUw4x77xRzrtoP\nBooaA8QSk0Wn+SWnzjVV1//hHfMEcfo0mvNrWw4IQI8Y0bWV6AKFYECCfZ4H\n5ipqEOju4T4Y/0S1T93BAan9iG4R6S2Ur1HgFqqEyw9KobaoXvfJMp0loiA/\nrrKd7+HKiu/CpN15fEaZs7CRf0KztA+EOdBcIOFQZTIolHDUwms9WUvEvs+B\nkPyLqHis8DtdzAN1a0RKZHW9EUb4z38SAAYAP2NyccVxbXGvaPJAMgeRRdsl\ndpbqaDb7yPdeFIu/m3mvI8DtOimOe82jdo/I+nI6WTc4bFp1AebrcBN3RmBF\nGWNGx/09IRLh4SEKSadgxmYzWWz+1z8V0TacE3oofCmTlohcoP8G/+Vy671c\naRlST2kGXXqBWYHz1aWV43dOXKxFBnupWBQA0c5r6nTelY6eOYnAlJv34uZk\nYuSB\r\n=R2/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.17.0_1524737565325_0.735522304693796","host":"s3://npm-registry-packages"}},"6.0.0-beta1":{"name":"@uifabric/merge-styles","version":"6.0.0-beta1","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta1","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"67eea47a9434c5174aed239644f80fca8d487b6e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta1.tgz","fileCount":178,"integrity":"sha512-PoKoHyUfjxxYlDN0Hk4Xf8/Viim+rM/WkBJMg+94n8VwEmhMJdti1gGXF9w53PrmghhUOiGS7urFDtRjQ+/9hg==","signatures":[{"sig":"MEUCIQCji89+6hrP60kqws7GRQ/Amr0X2vw6Z1oqPXGZi78clwIgdgjnQT0ZMfZeE4Av7oc2UCF4Ka2JR6t4LQa+n26I++E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8QkuCRA9TVsSAnZWagAAaUoP/0vIWdl4IIgQTgSA1UFP\ns7RJoyHZzgvTC/Bcn3cqD1HaPBF1l6THLy5HHDS1ZG9v/FAioa7+fUM8UZe7\nCWkik0xiOV8/kVn2876h2CMNIWPcPc6gYBemYXNjsC0v+LIOGn6bKJvMulmS\na4V7UCGcwLWxCW1hEbIYRO+S6DBYUS0OHehMneMFwymwxDV3sGje+7/HA/C5\nb5pmcI5h8w9UyynTZMD45bCHlHe930/LvkgH81E9u2Ewh6+xO3Pj/V5yqJ/L\n5LK7zSGyAXaC1Szqmu3PzZIi5FVFLI13C3/kDyzEa/nFjgBPk4j7IOF9UZGq\niJvnbXgVx7yzTNCraPj4hxXeaQujL0sPYATSfpJNE8elbqOLgxIZNyYSPmpt\na5isDhr3lzXtHdMV0dfcmoLaFsoSdB/zt4XU7t45+XOGBIRtDQzdS4FU0AyV\nIgRDvH9CPZtJDDtZVnbYeC68xcIP+rnMuEsdLWPKXDJc97PaAiT37gG51anN\nXRSxBGwuAuwEP1ApI3JtF7/K4Aljtfq8cJR1lZ0HOw469ZwLiOYzV9cIlsTu\njKhN1xAeh4m66l6QOu/yIJssfdwiZkSQSQcx2d114tYjprYGaHaA5P+gKeyj\n25w3c3wlLnPr+vjka9fgA+A5G19OW4noLNYVz/JhjcmCBv9V9bC+Cvr4Ufxa\n4MwE\r\n=vz1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n```\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSet({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n* Reduce the build time overhead of running through CSS preprocessors.\n\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n}\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={ root }>\n      <button className={ button }>\n        <i className={ buttonIcon } />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 { background: red; }\n.css-0:hover { background: green; }\n```\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\n.css-0 .child { background: green; }\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 { background: red; }\n\n@media(max-width: 600px) {\n  .css-0 { background: green; }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 { background: red; }\n.thumb-1 { background: green; }\n```\n\nIn 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:\n\n```tsx\nmergeStyleSets({\n  root: {\n    selectors: {\n      ':hover $thumb': { background: 'lightgreen' }\n    }\n   }\n  thumb: { background: 'green' }\n});\n```\n\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 { background: red; }\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (\n  isToggled: boolean\n): IComponentClassNames => {\n\n  return mergeStyleSet({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  })\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((\n  isToggled: boolean\n) => {\n  return mergeStyleSet({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: \"normal\"\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  \"from\": {\n    opacity: 0\n  },\n  \"to\": {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n* Currently font face definitions and keyframes won't be included in the result.\n\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.9.3","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=6.0.0-0 <7.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta1_1525745966341_0.8600375658702339","host":"s3://npm-registry-packages"}},"6.0.0-beta2":{"name":"@uifabric/merge-styles","version":"6.0.0-beta2","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta2","maintainers":[{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7656d935edd9c3f3d89094c9dbc0bf44f7fd3c36","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta2.tgz","fileCount":178,"integrity":"sha512-GulXm5DWCq67VUBT7jFZcr2YqciqgAr5W5CL+VDg/yQgO4soemo/61k1Y4y41bCPzYvFrN2kgb0L0CmDxPDw1A==","signatures":[{"sig":"MEYCIQDBY8zgVn/XuWdlq/iUH1GHhmR0dFALaF4Z2F78cMgsOQIhANw6GzfIxTWWyih9GpUTS5RIyXXZV2mH0V3Z1o9oYoEX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8eqOCRA9TVsSAnZWagAAX/cP/2faszwQ6VEtOokJ9WT1\n9HmgJj6CE/tm2Fn94DfJ2NX6hDiaxKokKrmj9fmt/1aRjzCPQdfvc48FdbCn\nVV6ys48wU8FT45ZzHm63FPotcmC0sKIT/FvhydxAvX5pbCcWoEpChGiHqBSN\nkfBGgs0Xv6QQhWrNRW9ie1wcVcZjSz6AGRxt2VP+BatvRdtjKyb37ObsWmgw\n5Rl9c4SVms/i9GuHI7OzT+j/fVp1GzuUvFXjB/t3Bds3u5JD1RdkzfHaK54y\njSbMfFW2KAh+SO1qvNhb60LKWwKsuWOV/UxpCNGdQTdH6fWWVIEW+xCOyH6i\nbRCKJSrXwFgJjWniu4U7wpxmwELOUG4OO/8/LW5GZgZMyAOuVO1nV+Qla7Ty\nhI8pWWks7yx0NgQEKGHzwTglE4NtOmNHtoaFw7iIqw3iTB1R24nmaGeon0bd\nuO37JRV8Gws7bRtehfq/q0awbnlIaRoOwWXy/kZJSQmy4sdl0L2q0p6cVm4N\nrHlVYMckcUwCHvoOyaWKdAfGxOA5NYQdanSh82HXkblBq0aPHN288+RoqbiJ\nqYTdAzNcXdz3hcu1O5AUh53Ey89pp895EGgSu6fyk6oD7FbwqaJAUS+Enc5+\nf+6RiNbwUtVLas+wWBnw4PDDxy1BoxARJR3kfMID1SS1xc6Mw70UU302o88B\njatg\r\n=6nCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n```\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSet({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n* Reduce the build time overhead of running through CSS preprocessors.\n\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n}\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={ root }>\n      <button className={ button }>\n        <i className={ buttonIcon } />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 { background: red; }\n.css-0:hover { background: green; }\n```\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\n.css-0 .child { background: green; }\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 { background: red; }\n\n@media(max-width: 600px) {\n  .css-0 { background: green; }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 { background: red; }\n.thumb-1 { background: green; }\n```\n\nIn 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:\n\n```tsx\nmergeStyleSets({\n  root: {\n    selectors: {\n      ':hover $thumb': { background: 'lightgreen' }\n    }\n   }\n  thumb: { background: 'green' }\n});\n```\n\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 { background: red; }\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (\n  isToggled: boolean\n): IComponentClassNames => {\n\n  return mergeStyleSet({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  })\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((\n  isToggled: boolean\n) => {\n  return mergeStyleSet({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: \"normal\"\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  \"from\": {\n    opacity: 0\n  },\n  \"to\": {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n* Currently font face definitions and keyframes won't be included in the result.\n\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.9.3","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":"6.0.0-beta2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta2_1525803661583_0.35841150374460073","host":"s3://npm-registry-packages"}},"6.0.0-beta3":{"name":"@uifabric/merge-styles","version":"6.0.0-beta3","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"568c88c13e749d6aac1e712b5a0b5130866a6374","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta3.tgz","fileCount":178,"integrity":"sha512-oZ6oYPRYL+rHG259dvTx3Rbwdcz/475EV0Mk1osojWztPGeRBJHDcXIXVsEYtcfcqoLpPcc3hisbnrhpm8tMDA==","signatures":[{"sig":"MEUCIHQfgnRypyY5B25LZpbxTdZhOTJqDl+d/TX68rtAyTUTAiEA2kHbGFbv4gxYNvAwR5B6O6JGu2SJZfv6dWsU+eLvnyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1033032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9huTCRA9TVsSAnZWagAA0QUP/ifCjPHC/MJ1bKD05n6h\n+bW3ddjBwhNHYHpchM67HIs02ZetfCok7pjuvtzGypEZotPfv64OSyL1qMej\nw3c/09gC+WzdOacV2gelG3KIEjZgfLHYPD4N1id/lB4kiQq2ckcruxFHc6Ib\nZG4ufViZ0CP+37yl2yB5L8rgmsOhOd44z09vVJjiczqTRu4wIGeScwQm+wht\nZPoXcJGPdHqzM+r2lRnBi58QAbIZmK0JZNXdhKdxxkL8LvaJgLFE6aNS+ful\nezILJNe7Kc9IXL8Vwniu4ccdlqlh+jXWqbqFeanw2W1J9s3iY55qj/OYZ/VN\nwXR55yCsoJO4hu4LaWPo/YcbOmRt2VXcPwnRsidpj6wkqxmSQuqJdP4JbXIm\nV1Hi3GN8oh9/L0WWRjxRPwWfeJN4M4XYLWaVahHhsDrRCfNlbgv36aUj6aSE\nqW7bwnyVJdB5VbnPgV1GJ38lXrT++RBMFICUA+MrmbS9YNl3rDAqNXGJz2B1\ntOZIg9RIvR9ATf/zuA0Kj9vFnlwHuzlbdHIUM8Tko/+/DySQ2rEZgr+3z/RI\n/V5Ykw96RiSw0i9vNg6pXKI7qbCqBhTrWVzTcuwHiCcBvO98MgbhmR/RRS4H\nY+OIRdUWsnECvh2sVi+Y++//lN28iInpHkB0/K4FIz9wjJ+O4t4qwWzuB/+k\nXxqQ\r\n=KtXs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n```\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSet({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n* Reduce the build time overhead of running through CSS preprocessors.\n\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n}\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={ root }>\n      <button className={ button }>\n        <i className={ buttonIcon } />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 { background: red; }\n.css-0:hover { background: green; }\n```\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\n.css-0 .child { background: green; }\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 { background: red; }\n\n@media(max-width: 600px) {\n  .css-0 { background: green; }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 { background: red; }\n.thumb-1 { background: green; }\n```\n\nIn 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:\n\n```tsx\nmergeStyleSets({\n  root: {\n    selectors: {\n      ':hover $thumb': { background: 'lightgreen' }\n    }\n   }\n  thumb: { background: 'green' }\n});\n```\n\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 { background: red; }\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (\n  isToggled: boolean\n): IComponentClassNames => {\n\n  return mergeStyleSet({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  })\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((\n  isToggled: boolean\n) => {\n  return mergeStyleSet({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: \"normal\"\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  \"from\": {\n    opacity: 0\n  },\n  \"to\": {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n* Currently font face definitions and keyframes won't be included in the result.\n\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.9.3","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":"6.0.0-beta3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta3_1526078354829_0.9277250105511683","host":"s3://npm-registry-packages"}},"6.0.0-beta4":{"name":"@uifabric/merge-styles","version":"6.0.0-beta4","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"293c7fe9c15509f295006c4069a0e9d170453ae0","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta4.tgz","fileCount":230,"integrity":"sha512-XgzsSadOlejHtKojyAR7iT6j3PT2sX3y10BNvw4pfG0nkDDkiOi63HRnGi8Kc3v00JqOl/qoxQTGVoOJlMcx5Q==","signatures":[{"sig":"MEYCIQCOQFf8Z9g975nGjducX8MScXJNMMTi6vFGqB2AFBw1GAIhAOpEAqDo6KwYeV9hLACMw1bSDOwvu6UxWsJDqTOv55cO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1195301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+hlkCRA9TVsSAnZWagAAMHIP/RPZWotjTke5B7P/Yh2w\na/BnXqu87YT/dpiSZ1tLMzX+13amq0HEb2pltM+5P3C+NzmzChHx0rifTFtr\nKroWik+3UXwBquEsWYif2g7MdDR9jU9oI/KN0noypxMJyIXlGETfWxuhlNeW\nYVKRlDOIID7LTlRlZAmkEUvasFXv8cVUhnKTlbt4NMUKgCCg+gjlBRflt1MR\nquog57x2fkbRRe9Js2ZRhcUbUkUcmHASMBmIh+FQcNV4Yr93Av5rgdjx+Xe6\nkek1wVVuuwVYCU3lh7o99+IzKI4Fx5kYwdc6C0jzfMxM9i4DqypJf2Uxf+r4\nN+fYstoj3nEjG3/MSW4YN2g2yDvfKiYEke8ZjgcfTbXAQLv77TsFpUpgS319\n2crMMSYB53G9N1pxp1zpFnBS6vi6qDR6vCQajRSdtN4jTA1pN76QSbyIomsP\nS2oXid3dOg7voUNkE+hHozfJKzSRDFmdG/i4u4KaQb/xa8fcrRTcUnkidUVY\n1TFcEqABLk+GAJwYft0uaqRrcLVEGVdNOdKbv/c2tJgrsqzBCuUPpECRzQdu\njamrmT8OmImYp6ztAx8nY5ZWePcBqPf4adUHM4cRvTYTVR6iyNghlrb2i1nJ\nanEuJVEhXWi4D1O/bLII0J9hgLwcd4+FP+Wc+j4tZt/23Bf6kVsi0lmI/g0s\naQ7q\r\n=Vsux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n* Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n}\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={ root }>\r\n      <button className={ button }>\r\n        <i className={ buttonIcon } />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n.css-0:hover { background: green; }\r\n```\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\r\n.css-0 .child { background: green; }\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n\r\n@media(max-width: 600px) {\r\n  .css-0 { background: green; }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 { background: red; }\r\n.thumb-1 { background: green; }\r\n```\r\n\r\nIn 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:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: {\r\n    selectors: {\r\n      ':hover $thumb': { background: 'lightgreen' }\r\n    }\r\n   }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 { background: red; }\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (\r\n  isToggled: boolean\r\n): IComponentClassNames => {\r\n\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  })\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((\r\n  isToggled: boolean\r\n) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: \"normal\"\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  \"from\": {\r\n    opacity: 0\r\n  },\r\n  \"to\": {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n* Currently font face definitions and keyframes won't be included in the result.\r\n\r\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.6.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":"6.0.0-beta4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta4_1526339940357_0.8647913474170708","host":"s3://npm-registry-packages"}},"5.17.1":{"name":"@uifabric/merge-styles","version":"5.17.1","license":"MIT","_id":"@uifabric/merge-styles@5.17.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9325817069011efb5f425e0fd163a975d9a12a3c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz","fileCount":177,"integrity":"sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==","signatures":[{"sig":"MEUCIE/DPCmByUQb8I1nL6MzKjfVfykC0Gva5LQ47pubSyOWAiEApaOmzMoO04W2SD/596Q2MTckJVFB2kLVUzbSBXH2I54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1082696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBUJ1CRA9TVsSAnZWagAAKbsP/if5QpkQJZD72/RXbZh9\nVtlsK7ObAn8Eo9mK5vjxxPW6cD9fgr4z9xvfpnw+HRs3yyCTUoiPipLNEQk/\nKK8MUDDKFVR0J18Y0a0cOb9pn63W78mGA4xiUzcvPhXls5vrMTiq5cF/nfac\ngf3f8k8jno9n17a2x4KwxP+r2E/ZXFj/jWwAR5AGc1kYjrIwShItOgVy5NQR\nBxsuYAB772/E0nHOMnWa6cTjMMQlTVEDFDxyMQYiqKkVcYKGucbxKpLzUm5d\n7CjWEFsjaOqo6qmKjtvCd/tJrfcxU+G4mvlU92Bp1hSqpfZr+LY8clKMZVl6\nRWjoWA5RDply9ImzQw2eKuID2CUHRUmv/wXeZ1jPjyRoLCui1FxNOmR7ygnz\n/G/3+vPJOdq3/wGhF59kx0xy5P6tsp4wh64Z2kKMgPmF8bFhFNTN7BA8QJgS\nrvtVLhqQpugQcjaWxJDPGyCxuFGw2rxIKJuOt//am3pN/Bo0fzIBWPP9znGo\nOXgd1cMJQeVvmsHfBTPEl52zzQILsZmJ0DXrkl1gb1/u4IF7DBCniIR+YnBt\nDOC27NBQkalCchSG35vp+YXw8n88f8N+wnDDHijUkEsotaQ90kffOYNyUHJD\nr5GSAGs0ELa3znzSe//5JF/n0PcnRNOKSeHSVpyPoCWJ+awAjB5p7jDOdvSW\nFm6I\r\n=61ji\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib-es2015/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=5.0.0 <6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_5.17.1_1527071348165_0.9561855826225802","host":"s3://npm-registry-packages"}},"6.0.0-beta5":{"name":"@uifabric/merge-styles","version":"6.0.0-beta5","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta5","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0e543d8ca9b51bbef66ad20bcc08d8a344ca501d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta5.tgz","fileCount":230,"integrity":"sha512-uJDn2BBeuwaytLxxCQd2K8BboweEULhWTNF3mqLM5JxVNk6i+LeNgTQU/PFbVrHR5YbGM07Sf2mXXa655K1liQ==","signatures":[{"sig":"MEUCIG2tLoDN8nK3IUHzSZA38/a7NUkvk9ndXzIe8tgkvZ5/AiEAhKaMvAId1IU0xj7An958KTnevpudrnQPGJOjKKnZHXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1195244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBa5RCRA9TVsSAnZWagAAmUQQAJms8SYUosWYQMAkUTFQ\nPzq/Ne7gwKCRw5Y5SYAnus6XOrbXxMKTyf+wd8XjR95SDaRCBPzwbX1NDc05\nZ2GbJiYF+0tynNttLSJD8j7u6Atv52H5RVFDZo6SBjHM73dTcVKJLKOVeYvj\nQ0FLJ4Rxy48mwffzWKys+YJOgr1sWWDTv5VtsSB8CfqkFe1dKXYfA0We3KQv\nH9lDzECj6pPhue7QadOtWS3B3qCTsvtKjBXJRO5PRdKVFl51eqJLwPZsHLbM\nNg0v359j8vtB4oWx8jmmLiCNdBRoIW+Vi2dRQEaDL1gfsFrIGOXn8NYTQrwe\nrl110V+mgT7kRtCFGjCArOiU45sMHczfARSHRebPdmLB488vaS1GEWEGs0Yo\nEX1+TGIn5ijExJX/p7gitgBr11r1bppPXzewzImT9HAAg8X0NM1FVET7yCcR\nrbVaWi+aAS46F126JTKKxEsnhk/QZwCkvLR1eQvecvl0NFF1+fbu5cypvGDr\nHeM9GLymm4942zKEzEo0o+F2Mwi7Y4AaulKt8WknVFUHiv4xi++Wh4zMuoGK\nssfsU4G9HOMA+HuRbIR/UISjEawP0ACH7dPH5Z6cBuwGElG0UTsoNTRHb0z/\nX4bXqNcqMglINP9EYgndTOi6ssQNnpxoOcJMzsubgPVrWFjlfZsRbOC6dVeL\nsTv/\r\n=Rfh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n* Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n}\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={ root }>\r\n      <button className={ button }>\r\n        <i className={ buttonIcon } />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n.css-0:hover { background: green; }\r\n```\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\r\n.css-0 .child { background: green; }\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n\r\n@media(max-width: 600px) {\r\n  .css-0 { background: green; }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 { background: red; }\r\n.thumb-1 { background: green; }\r\n```\r\n\r\nIn 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:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: {\r\n    selectors: {\r\n      ':hover $thumb': { background: 'lightgreen' }\r\n    }\r\n   }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 { background: red; }\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (\r\n  isToggled: boolean\r\n): IComponentClassNames => {\r\n\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  })\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((\r\n  isToggled: boolean\r\n) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: \"normal\"\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  \"from\": {\r\n    opacity: 0\r\n  },\r\n  \"to\": {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n* Currently font face definitions and keyframes won't be included in the result.\r\n\r\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.6.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":"6.0.0-beta5"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta5_1527098960643_0.7951839664824623","host":"s3://npm-registry-packages"}},"6.0.0-beta6":{"name":"@uifabric/merge-styles","version":"6.0.0-beta6","license":"MIT","_id":"@uifabric/merge-styles@6.0.0-beta6","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e7d67856ecde07599a412b225b48af3e934283ef","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0-beta6.tgz","fileCount":230,"integrity":"sha512-I2KwmRF7srR7M3t+JmMiEhuehVAmsUjOstqrc6W0YrH2oigrgogvWy+vEmdo4RT77f5Q0H3KlT0hP+GoiGqtxw==","signatures":[{"sig":"MEUCIQC63xyMvdY850MMJf11/gG6y5yLl3BdW05Ae5V1OKt1IwIgKkl0PrHwllXVXg+zqSWHkF0RLGZHyM6s5MTrxjaHfBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1196558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBeZ5CRA9TVsSAnZWagAANAYP/RNYKMNtuizk2Zfcwc4a\nNQOUObEehCLve7G9TfX58l4vrOSaQJBx2wIsyySJgigQlp++MsJ4imwIaEgg\nbay6NP2sThqbvlq3MZLZ7vfKIUJIHvFiX8FWZm36339VX+o95ICx4FZat+U5\nEmjtlP+f9rHTxlmrr5bHR5OlejahGCS3wWTJ0rYTXxWUf6sYhEfG9Ki3e/2l\nudolB59wokb4GmzbHhFPcI27H4jYhWzsX96mMAJb7yiYA4iPZhSnMm9CDUCg\npPbDn4pnC9bRbR32iS36p+140KepyBGUOTlZMZcudlWYkZ54UvHe4N0Ze2EF\n1QDC6xXZBWHJqSQAbp0+I2dE7hBjV7yT30iDgtZggTtSlY+TG56X1HFhXc4A\nINfDyD6cZFDHp87iqGqywuSDJN6A18dm3PxuMH+x33Qnf2Gz4P5tMEfaeWqR\nZxSG0Fh7mmp3RRs8OeRzC5WaauHIXZfcvBdA9tJrEijNjjKTJ+PiDBr1G9th\nmR1PFUbLqNQuG/0HzaHntwcfZFQ/JAlwGffuAUmYy9iNA51NVpwHviUcx6Ib\nKIhTTRlk8vPny2Ub4Q1s2kei41KCfTZvVXI8qm5WxzzkimNt1VPJwfMZHWa7\nDvG3g8ahge78xPR7Z6Nn0hxUp1dHuddpNwtOiqxks5YvdDHp7FVq7TSlkV8E\nrYGP\r\n=92tj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n* Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n* Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n* Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n* Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n* Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n* Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n* Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n* TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n}\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={ root }>\r\n      <button className={ button }>\r\n        <i className={ buttonIcon } />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n.css-0:hover { background: green; }\r\n```\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 { background: red; }\r\n.css-0 .child { background: green; }\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 { background: red; }\r\n\r\n@media(max-width: 600px) {\r\n  .css-0 { background: green; }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 { background: red; }\r\n.thumb-1 { background: green; }\r\n```\r\n\r\nIn 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:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: {\r\n    selectors: {\r\n      ':hover $thumb': { background: 'lightgreen' }\r\n    }\r\n   }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nThe `$thumb` reference in the selector on root will be replaced with the class name generated for thumb.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 { background: red; }\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (\r\n  isToggled: boolean\r\n): IComponentClassNames => {\r\n\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  })\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((\r\n  isToggled: boolean\r\n) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: \"normal\"\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  \"from\": {\r\n    opacity: 0\r\n  },\r\n  \"to\": {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n* Currently font face definitions and keyframes won't be included in the result.\r\n\r\n* Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n* Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n* The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n* Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.6.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":"6.0.0-beta6"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0-beta6_1527113336956_0.3244191111804182","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@uifabric/merge-styles","version":"6.0.0","license":"MIT","_id":"@uifabric/merge-styles@6.0.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6325569904b7935b85e01b0de5132b5db649e001","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.0.tgz","fileCount":176,"integrity":"sha512-wSdRBBlOH4srGUkcM2eiT3g7ey5SKAjd0SyFIeOILp0lTvFJ9AC+pziKW92DbULtuFut7uxxBPFHXAez6vb6qQ==","signatures":[{"sig":"MEUCIQCKiH3V7TDzifwsE/vKBcZwAEFZPnQy126q7rnoY+NhbAIgHphbPABUhwEl0O2qYFAXR26imzs3EcZJ4RTnoZfuyZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1062720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDyFrCRA9TVsSAnZWagAAmVEP/0ZzlB8mC+k9CEJEoBcI\nYtR/p8MNr7bulGMIT7mZJbG+mn+8OF5Rv2S2KhMmY5EtMiCxF18OksKEduvW\nUQ3EpfvKbNMHyW0rhr+LSgAFgLXHjWstUOnnY/5rwKLzLOUz8fdk4Zdi+FKx\nVVDCCsq6ipsH/moyEYLgmLm287gQHeiv1XCQOb4bPUvZ4XjvKrmBuHCfmAH8\nxfYV2GoS5WzbZ0V+EZusKjXJfcxaJnYPBRyLnDKBp5FPv3VzXg/unYSdJhSs\nDG/1ifnxKgyknUENr+Kh+A4+Tb2OrBM5659j2uJS5czify4YgwkVQKzK42tX\n21zQZxxN51tbBshEQiqPjdD6B2jNthj1lz8uQoZ3MEUtGadUjNJLE4bwB1GG\nsnd1wqp+p5Wxzz36ha+vXfSJRyVrq2LdxEsv0hZwdHU51TsFEIGuP1SyYU6n\nkirxhaDtyDhpulMdUNhCSu2d0wzImBtlqYs+o/37Icr1xOEqFt9ITqpTfdXo\ncoY3MoPt/QijdCy9wu2p+UsxIhWir7n0/hnX84MRUsaYdvuWArCjkG06QH+s\nkSRRUpfBqQ/AqAEutBnc2G5gjOSNEe+PGbKUaxiIi+m5Tp5tEZuaLMsEo7W6\nhG0bdQPxcdHf/6ZJ5gHM+XssenHm+xAVcifqi1mglbwzGHyLQwTFDQEp6fI0\nwZ+u\r\n=tX0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.6.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.11.1","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"21.1.8","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.0_1527718249680_0.6989681001138863","host":"s3://npm-registry-packages"}},"6.0.1":{"name":"@uifabric/merge-styles","version":"6.0.1","license":"MIT","_id":"@uifabric/merge-styles@6.0.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"256fecc56096fce49105e20c252b7490bb37e425","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.1.tgz","fileCount":123,"integrity":"sha512-PHFK4+vX/FTf0qFtTsbJKzu/5ilET77Tm6CivqUorVVqjWdavoFLZ/QDgT07jmR6pGy9pp/+3ZQGuW32BWy0VA==","signatures":[{"sig":"MEUCICPlYFimLBEJDIhruWUmy+vw92EV9H6+VL8QrZCetXtYAiEAhlKExzANeLkNhqy6LtHcVMOEzlYUSiNWGAsU9OCZ/V4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFRF4CRA9TVsSAnZWagAAgKEP/2l1Xvd8qQNInpiMWkGq\nvZWl+1lWy0eSGnWEg7hj9peB1VA5nQizUoG2t0GEzX5BmB4qeU0DXFLLLdtK\nioM6aXOSZq2w0Vn/LZgMmkZl2mHW6q/wa0AQvtrNG0wMiBLxq/S2etmt+D/v\nhxWIc0s1OmU84hL/kuv4GIkzw8U6BPA6US0+AwqbJ+bjDk8t0+lya381C7ui\naH3/hfc9ShU8fH8yPo356hlCKkgkNKOedqhERdjffzYBftMLUHlaQKwCWxpn\n40L0hG4hWk6y215s673Jt1tvNSWQKoEPglK0LiAWjL1hGgs0c9YUxVwbumUS\nWra2v9RMHCwE7mpxCd8j5oIKVfUIcsVvCvVpV3R03Qw5C5yO/+4BDplca+Xh\nK0ieknQiu1hGPSwUsyWYU6YGGtf6d2DVBxgkH2qX4+JYdPfHCsdRAsRvFe+e\ni0QM2gBRnIS15iMqvkg0yGpKA95AfvlLgZDuTnFxbOjfK7b66PLAjS0k8JqL\nb7ut4Z+9kRyOGlzvbylTygxeh98Cd/1PaZ03FC07asyz3zk1ESuw+V2lpI0B\nHcDWUU1GDPvpAj4OvGbwTl5aP0RDjao08/MK/tiXe/Vw4Bc9xb8J7xXX9/zw\n6mykTiG+XIuVRWyM14MoIrWR23+wGupNpdDtc1tLfQdpk5iWtHMRESKvqo0A\ni0P6\r\n=syK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.1_1528107382487_0.2653318732620067","host":"s3://npm-registry-packages"}},"6.0.2":{"name":"@uifabric/merge-styles","version":"6.0.2","license":"MIT","_id":"@uifabric/merge-styles@6.0.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7a4095f2270328b117abd4879cb39d51500393e7","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.0.2.tgz","fileCount":123,"integrity":"sha512-OoSzF2hoxGNVoQbX0BItXlA+faoTRj0Z6cTVnRSuXd2hSK4wRsBgKsZzsW5LRxjdcfILn1ryw4FQdjLzJW48UA==","signatures":[{"sig":"MEYCIQC4XZgD+Iis4dKAVob3Xk8sLqszrEJw3/eGM2v6Id1wigIhAKwcLf3S1VyzZN4ujz2cxX57DdnGAX7uqzFjo1vhzdoc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":669463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFdz3CRA9TVsSAnZWagAAwBkQAIPS8HXnjRRuA7HASdTc\nwmBTZLEME2/9Kxz0i+I5qF+g0IxkdWM+YciA2jnNCZP8R3GUDytq1sX6CJVV\nuhp+NShjQ+OI9TbPU077gimXSoAJ1fH/ZJZycuvF6n5UP2iyewQ4OvQLz2Zt\nyoQqHA/oMI1KHjpgWb9jDEye9Y59wJfAobHyYBrF1AboDbspAUVJeWluPJul\nZssCk3mmPuM/hBjGZS1gUYWF2wnUbdk+2woBjwFNNhBEkVabsiuSvs3+ivJn\nZSYeJ+BDdIryGRRqo3rdlCtyV/8f3YuIDXYe7U7zOaJTfXSUouAMy7HI1QTJ\nuGLt7llbZ1wCJ0oXx2n0dUUxpTOliyASJLub79wBPlB8sYKc5ZWsE/ptUosB\nradZ4HaYKZqj410l/yQPLYtjQlWQcxQTcffYdYBdX+eYQCrOx6t2kTU5k2eC\nV/MTFVW03Cf+EoJuLoTTp5/cZsUwX4Lb2636FYNYJZNguyRbPGWfQWflWGFd\nEHxvvNWyKw2PhmYEHDn/uo/WU5YBjrfQNhOJ/Fu0AyZpHUd8k1GelSgb6bDb\nQt7JXxMIy3P5BLWRORSrYsYXSsiG3xZFsMB13Vu/MkDMGz8lZaCLqg8R/f9o\nekTKFpK9pXX9JFhltIPLAABv1EO2LBxkvX3Xcl8sFvf+CYhwYbZ62/nAqZBC\n56ZP\r\n=lQy9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.0.2_1528159478423_0.2236298621659638","host":"s3://npm-registry-packages"}},"6.1.0":{"name":"@uifabric/merge-styles","version":"6.1.0","license":"MIT","_id":"@uifabric/merge-styles@6.1.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b68a20b87baf7c6ac6d34c4a5b274473567c4100","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.1.0.tgz","fileCount":123,"integrity":"sha512-V7Q/p9AitbdDk9ZgRVrzB/Zrqw3hOp7K5aPF8YtOvB3nnVJpBhD79vfHbwIdPDsp7uY6SezhBy6LJ61i/E8Q8g==","signatures":[{"sig":"MEYCIQDYMa4MEn/CfouHwU1vGhdukqCmigpE4mqxP4EpbBF08AIhAPqLbN8c2iNPUUbgrGfUQfJRbLziC9cN6g5gkA4c60ww","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGKafCRA9TVsSAnZWagAAKxgP+wTxWsQXWVVRT0GeO09A\nmA1DsfCXWdse3pVwTWvG81QvymRYDOw85nLggewHRwZuaWGuvGgxG7QnN2Wj\n8UVbA3R95ri0CcE4DX7DGZE4gPdbMasencYSNpFUOg9nyIEm5/jLwzShHR41\nUmb/TnLqHssMXKAbWpywvH77vrZQSbOo5Grz8YrDlbVm2ie16lb0krN4t/Ij\n2/Szc6UjWli9PgBR72X9XMH01jn3AW3z04Rr/shRM1HgiQUCPowoliGdKKi/\nax6OFpsLI7I43dzZnqNuBeawsuWywQunW24WgrwLioAk0S6afi0RohZOK891\nKscYqFgjVxSAxm/31U7zmlrroZ6aKD089FzMEjZRqI6NsPt5f2rdSmTbtwtX\nBaF5spZa6CK5KZp0xJMWiklHPWIURNZ5ZguLXqB92J6o/eqbS3HGwyc7SCrS\n6008J3YkyenHhRRjoILt4GG2oVEOJA/Mbx3o27VSjyFEVIg7VAsNfM3gP2Pb\nWu1iGHWgIISXSn4Ek5x/deIZexQ4Gu3LO1cMSzutdt4+rwJ2Dzj4jIF2CWhJ\nhoZ2kkno7ZVxQNZvezHep5g4MARZMJ3rYeUngloqdKVESkYe6/qYXrDlQRvq\n6aryvta8MkK7LmO0MbYeq1wBUHJnx+r68PF3Mz8drsbdQv7fi33Mswk4UrZp\n97re\r\n=1ByN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.1.0_1528342174147_0.9460897350609003","host":"s3://npm-registry-packages"}},"6.2.0":{"name":"@uifabric/merge-styles","version":"6.2.0","license":"MIT","_id":"@uifabric/merge-styles@6.2.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabric","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a43d9967e68e3008e9112102ac820e33cf83c14d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.2.0.tgz","fileCount":123,"integrity":"sha512-n3clWeVR/OVewGR8lqdMTqx8SGXi9B44zcwFT/+mvgubCOxRbrKx2bDwMmy4VglupeJHj+CpZjiW1WlUyKB1Dg==","signatures":[{"sig":"MEQCIES5UGo7NUcy6cDx87antxRXwVZdeGpUdYtJQ6+4PbDmAiAXipUSM1dQLYlhFSxs2lgMFIiSOBmwoeiov5RpIL/4uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":699119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGV7fCRA9TVsSAnZWagAAJp0P/0x6xrogzuMb/nIIK01B\nFb8vnTPnwDG8r5XwrCF+133Uf3LNb791gUPWUQqdZkP73y7YV/ba+dKp6p5w\na6JDu6YuENcx8Urf4/o6QTNwg6JuRBYRnYBqbDKemJl0UKTzQ2r+4kAlzJYe\nj7mDn7CxzWeyEmDMPN6tgR3vIgdM7BamME3TTMARijSEPrwbLsSP1px00vRh\nT88oYcvf8zgr8uLfZeYvpeeEgc5CiMv4ghohcWlWmR9KrhbMeUJcWSoN254E\nEhDYii2k7sIILXdxKr3mugVTbQdQ6L0tXV12gQB/ig4jmShr53gpfkFttw4P\n4HudOk02jcGHw/kJomk9qceodtxugxH4a+KyS06bLRCa06H7D9+EGR8CV/d5\nHf7Jujv6T62QNTOnyNFwfTTwWKvCOqU6bL/1p/p6HSbXMevHNVdhnzpHmLI5\nwd5990zEz9GCoeD81YtbSqAVPc2SPrr/g2RICiD/1PPvkGF0Wfp2IxLIDg8c\nYdeOXCZNjXCVnJOefauzQJj3gwJkmeCH8LgWkdluFDHNk98XgYP1X563BOcW\nEhNPIDxYeVUHBhrsLVcyJOfVYBIUTtHATXid4/yGcKvn7/YDpF5JkAnMYo77\n7pXLTYz9HfJNzIDXOecgWDEYGitIjCEqsiRkJH5sKkgu592ltgB8MZt9LysS\nHoVN\r\n=sYto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabric","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.3.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.2.0_1528389342259_0.04158089916569341","host":"s3://npm-registry-packages"}},"6.2.1":{"name":"@uifabric/merge-styles","version":"6.2.1","license":"MIT","_id":"@uifabric/merge-styles@6.2.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b7f7eff2ff7c7a92da62249104376411c63e3136","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.2.1.tgz","fileCount":176,"integrity":"sha512-7z2Or2u8qJf97u4/EOk6NGPX8rgBmglIL/xlC3GBb/WqNeRIMkS8EnvL0nDbhtIIqKw14aVVxO5Kqjbf1KGROw==","signatures":[{"sig":"MEUCIQDfTcL3t0qUc6NfkRNvSOMllmMJ9YdtjFU+rB44p4ef7AIgBvzIb5hZo2J7aQyvmUgWCIPl+diyKyvMGw28c5je7CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":938846,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKiu8CRA9TVsSAnZWagAAvZAQAJniHQ4YMquwLkLTtyWA\nBbvbH00ggW6FN28uzWZSwly5hzIoGOdEd2JLnqxmyp0w65HfnzycafWtDfnh\nBQgfBDvH70mLMB8WLpR6RbKzWV3wo0SUFPjveZWTfyf11JrstjnL1tDLm+jb\nLxShzmvWpzqqT5wKaqRXViDPWNMbEfqgwSeYI567zGsUQNJ3vL1HNGK/9U0s\n0nF0pKFmfkkle+CXkwQYSDSCu+18sQ06Rt1N1K5vw4RdwrcbDdjn19sZ27Up\nMgBHrOtl4r7tpgkxnk/FpswlWeHIPqOkyNuvz0fRL5hKW0veD0ztIfkijzci\ngUfmRdWf2+S5DxVHwLN7XDQyi3NfUvxklJtaWiYLOJR48ih0pNrFKzj2W+q6\nYblsqmMbaNuBS4NuwcyxVYV2OEZC9j0ycQH6ZJR3VZcLivt4HecqcKYEZNX6\nCGJFGQmsEYH8XdmYHU/dFOYAgzjnBezd276lqJu+vI+i/MXeGyhlKCpBTqL6\n3oXOHdE30SOAAp2wDkOQQx95jl9iuE7udNU0kiK0qnhQJ4mbOKHzZdw0CE3X\n66EunJgY7mQGArVOqpF4L6TVVk0jdDBif+5oA8Wp+GR1iHNW60wCS7K8K+IC\ngEVZhCZ1ODbto7nkiUXEoeVRHu0pIIwUy88EWmlpO5WExwvmyZ7tAY7acLUG\ninQL\r\n=2qnl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.2.1_1529490363298_0.05449788681052281","host":"s3://npm-registry-packages"}},"6.2.2":{"name":"@uifabric/merge-styles","version":"6.2.2","license":"MIT","_id":"@uifabric/merge-styles@6.2.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"268282af7bcb828242307318e692bcfdc576379c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.2.2.tgz","fileCount":176,"integrity":"sha512-npu+686HEkFaoENaaeauHHtlufoDQrOMEd73Fzl3MSmYq3NV3aCJayzw2mWsDVfXFBYBuET5zMLToMdrOR4RSA==","signatures":[{"sig":"MEYCIQCO3BmT9hv62lIk7ZUFJBq0uYCxr5EcLnc5JCPQzGJWbwIhALEnfloGtrnYdFZZou+yWTgnjxE+PQAyenfZDQpwG3Ht","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":930416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRD6SCRA9TVsSAnZWagAAnVgQAI1CRXWAf9ZLIo4qr6+S\ntJQbbnwQ3GX4rN+IcvhxCJwHKVIRUrg593Evv4VQmo9uz5IJ7ZAp4H9vc96G\nTjHMvVu+ul5vn4bSgZILlqxTT3N8d5/AXSaiOYP9xvKTHx98ZagyYtp/BqxX\n0MwPx4TXnfbXC2j8GLxlGLgTq/4gJRqE9gxZeJVsU8qRoifvOtPpy4JoyQ0c\npvvz8wZIE/meFORKkCfGS7D+rgyJKPOvzDrltO9R+dvyh4+6Sr6Ye90rcEBu\nd+E90lzYNfLxh/jjJfR6BwfjuNdOXXeTiDp+30NPfBK84qtePoxRm+tMAJRm\nLIjSWPRueZL0O1Wej6+lt9mNdTxZeQTtO5Uh59+lXzkYf3jJEvAq6xCzTXd0\njyjmJRXzf8Fw9mrmsS6J6uVbtKCkGXyoX4pT623cKyDycdpJHEWtnVHXgWjm\nkH65eZnHOOCFVSVig5+/8kmp21JCgQMT40q70epqWhkyJMQUAuICFucm9u8W\nb6S3wWgfK1eXuToe71ai570awJ1QfDvPvk/4DU+fc78k9k9fio8okTz//fQe\n2StW7gXpVRMNbHwndENcpGEMACPXXQZ90vZ01lu6uPwde9mzmw8Rq/owqp4m\nZCegR4A0LhnBbuX84SQ1yy6xAQmougS+YA/mC5NaNs6Za2Z14W512sjmF+dA\nUtu8\r\n=D89B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.2.2_1531199122509_0.5275094689620621","host":"s3://npm-registry-packages"}},"6.2.3":{"name":"@uifabric/merge-styles","version":"6.2.3","license":"MIT","_id":"@uifabric/merge-styles@6.2.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"71ad994029093c405497b15df60b0389e718e934","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.2.3.tgz","fileCount":176,"integrity":"sha512-rpxxLg93o3AoTys5UF5tOe7o+tjohdlw3I1ioEcwhTQPIbGiT9Ex+sYnnDqoNJixhkDR/Cr39yD4S/i0fNepsw==","signatures":[{"sig":"MEQCIAnwB3nnYH7EjzG9I36ZjnMnwgJgx3yaod91qUgYCzh4AiAOuxY49Gk8H5TCVFUoQSmuoHVugxD9XDG+HiltS/xe9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":930986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbRSsGCRA9TVsSAnZWagAA4XAP/Aj3AH3t2yoaQB0c6G/z\nlmD1MyA21eH2hC3SA5k03PlNFxYNUtOjOjC/l7lI+Kot5iznKxaCSos/dnmx\n4Nu2H+/dYhrpaEW21+BsndPl0nJgyMnoLeDlwan0DC9uMuUQTNYdl18MiXXa\nAbpEujxiqRpOsWS15ToJB2d07Vse0DsieEhkgLdrlO+dTtyBFBRM8cb9ho9q\naTxArKoy9wFmKOYw0ahuQdCz8OcgY+jouUf94aRg5ZbG2Ws3wjxVe+3FAZOQ\nAR4Z5QHf2+bl1dCvYqS+f3iS5bB/4/ITEvHV25rY23DCJDXqB0/CTydoVoMZ\nOXw2Qhx8ptaEkoKb0KN5VN0O5aTKydPIM5acHqbj6nNm3RHvYhquEEwuL/2Y\npTBEp4+Srqpszu3wveayVji5p+QBgXQN9PHMDck/KvIzlYAMmLeVWCz0fsQB\nbXpcsgT4A+D4CgASOny2ZzFWbzTNRo8akCg2TC3H5aAhT1iGSvL+baL3t9wC\nZ1XR98ATgst4TAA/NItd2W2X7ykvng20BfMQjQZMovs/LxB+vQs29AIpUwgx\nsK1YhVAv4MGEtN8LwBEUNr+iikJSYdMSHCxFKKdC/ZlgvRaubgKd/SfbDbLR\nwxquR+6PLzDVBR4/poGElqeByh7/qDQWTAxZjjWd5we0n8k2nEX0OXPdCB2M\nChet\r\n=StgD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.2.3_1531259654338_0.435289948611534","host":"s3://npm-registry-packages"}},"6.3.0":{"name":"@uifabric/merge-styles","version":"6.3.0","license":"MIT","_id":"@uifabric/merge-styles@6.3.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"c79dc328e8ebdae3d2ac1f04070a337d37dcd0ab","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.3.0.tgz","fileCount":185,"integrity":"sha512-zS6YX08FbIAv31FbyVv7brRh7cMWOepXzlHg/qUg8lasUJ5VjoSAa4X8O4vjjxH6QBnhG65rcKg+nzJL6UAJsQ==","signatures":[{"sig":"MEUCIGHR3K0RsHf/XRUymjn6pJBWzyKUQFiS8YHDeebJa3brAiEAuE9+SzEmhXqQgrVu/QxSHgmt/1GDc8/q+UNUFK84ojc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1035216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSPWRCRA9TVsSAnZWagAAZeQP/3DTg5gwZxsnxwRU6yiS\nYvaDIAO7FEbryj+JVoCMTj+8HCnIPvfgESI1P5kmaRqL1poyyPYgpOnAWW6o\nCewg5zbCuizQWpzFhrdgkDiism1GCQjs0KMmL0p2SPUhoUzl5h2zuz85eW9+\n5zHmsF/fmFh3TRxrLKTNFF2w07HwEHzYdvcC7iZNPnlh8jiV4hAOq/YYG93J\nCogfMMhQBVlBqoUiOwk7z4pYGAQSiJASXDZ8/4EhKCCIrYNIK4i7D8pK300j\nPc4+jhgvzZPDGpiwC7o2a0DpYcChOHAH9vsCMevW3HzQm+i7JWHsAtsVwrGl\nsMBXGWgL11UYAR1xxYAhMLl5VcXjvWrVyG0nAAwbblXWrCHa3uz7dEc6eQPw\noMpoUZnoyqw+gGbEw3KT89cqTb7P6aAG5MAU6DIt+/nW/j9HRkVJjsWQq45t\n+p5Rd4jRCz+bRNBjSRmVnD3EcLrbTVrcZXfjH0lwRQBCu8nKlAHUV6RPObCl\nBW59Xpo8STbWEcTvVT+WvXp+Su0S0OdX26Ii9jR/qLxKm8jHqxUkSzAFGQqZ\ncXBLQhO68OeEgi5ByCxw9FWfBXKZq+a9iD14eveSF1QutnhAUvMPzP0hZcFF\nLrYDwg+tJ9ZoilYjl8KTKxJoGxHYzzEZYBNEBlMuCBUsuy5YKJMvNM+3q/DL\nT5+h\r\n=NSU+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.3.0_1531508112984_0.9107146580212415","host":"s3://npm-registry-packages"}},"6.4.0":{"name":"@uifabric/merge-styles","version":"6.4.0","license":"MIT","_id":"@uifabric/merge-styles@6.4.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7d5a9d16013fa60ff2a8f5e383d96d8d49eaf2ed","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.4.0.tgz","fileCount":176,"integrity":"sha512-/gRAaUcj5HfQdiPbXXy4FQST1Q9/5qug+4pj7EDc8mbWRsVoTgjiFmA7RKhVd3nvxj53gR8suJyx3i1uNgc/Ng==","signatures":[{"sig":"MEYCIQD0aJ8w4IIdVPZCHiEyWagGJFXbdRADucmRgFPwyt2lIQIhAMR5VfC1DgHQAW3RIGNgTMrVwQdOYFWjMPOm3LZhzsGH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":931490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSRp8CRA9TVsSAnZWagAAO6gQAIl15GL4x/dNfNFO8zlV\nZApGpSGbC+cVqYq/3l7N4S2tnLuwnG32CcEB2zgBsaLoaL/T+2hgPbtOmwJi\n3jjZ2/tsb8wgV4ABag9RFZn9GGGhOncF2lGe+DOz3EXqvlRbO3A4rqXyjEcY\nCIpuCPN4UryZf9KJbO2vmTXPxLhdEQjapccRnBJHmGXFFrOfTyoiMTSCfMiO\nb4qoc0PJohdkUk2OfVSFKQP2bAhAooofywGMuJ3B1UOtJggR0O9k+97vkArK\nLYcA/m7qjCzx+YH6fgJpwXsyATF2baATb1hcpux+/Uw95SJWtYzKUUbsqilO\nkyOysG0LTeRvmGGFqegDe+qErvLj2NzynFartPQQoF/NwTMICcyzfZUNexjx\nxR4tA9O/fqRrLbTRs5r/b1CjJ3hSQclidYfnv5uLeo1pyhyCxgkNAgT5Hpif\nCAXaO0bsIB15MuToQpRRwxNfdrr+m4+8LRNBZKpEbJ/QyZm3oo1ImYzD3oxe\nNmcIedxcJq7lNVps9Y+v0ylKkhYdj79Gu9vyHz/xmGSU13jfy4GVZXKYiHya\n3StoxUTl/1zT/+pvie3bbLWRh7SOKkhctkd+T4RCHp7V8FdRA/FhRU+5DnPK\nW0qNO+pSMdEVBscd+6iYbvC+LROvLWukTCyHFTUGwWkO81PRq1p+gA2P2QmF\nDIPY\r\n=Eq57\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.4.0_1531517564731_0.6703263577357297","host":"s3://npm-registry-packages"}},"6.5.0":{"name":"@uifabric/merge-styles","version":"6.5.0","license":"MIT","_id":"@uifabric/merge-styles@6.5.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"8de58095de11701ac97b14b74813e0a2e52691fe","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.5.0.tgz","fileCount":185,"integrity":"sha512-NEnMswc1dTHSYFDD7m8Pbww2LvuEWp3y1j0RUHT6Rv5uagK2Y90BkLsqdAJrbGvegraWTW2gAifIyh8q1vCXPQ==","signatures":[{"sig":"MEYCIQDUMoK24UhGjENZxdXwgkQzT1L26YimHToAkrj+GUVliwIhAN+WQAYoAhnTzFzfLKcwLh/3mjwBKGMF3AsOU1J8Vuca","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1036977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTxW2CRA9TVsSAnZWagAAQ9gP/jDx9ne/hoh/qoWyotGh\nd2r23lT8U/F0SqniAVK3CxeYkp2oY7wM4eeh/rFBBIIVKamNvF9RfLW0SCSV\nQoC6MihOMUaKeRuVkhwEAfpiuyH+eEf25Ce5unl0h1aUoDn0vgeZ9HApXSVt\nSuFj5CY+Wm415lnFPAv0BFE5yP2K6yqGj/TF3UDXWPRfwnvTEkzo8DS7SBYz\nrEzOHLjhJt+jVeWoMaszai8+pGVAUtCQ2FP+glrUrvBuM+a0yKjqesY71IW8\nhhpnaxX+qDzmYX0WfZ/dDrk1sEh3TpZkCT+jW4XUJzetSCSzAyiFh+r0McOF\n0Q4oL7Q2F96jLilUXfGfkE2fdR3TAOa98rL2f/0JXGY34K3IGQEvG15JKSvo\n6aovqBdSOBCx6aCnXvVOIG6Nnsi6PuGA0onc7f/FYjvqYaOn1PlKsbqT+jTx\nPJNvcS+amFIIOY6G1PQrzmJpqPRRunCEoYIe4xoSe6chD3hwQkwjnkvhaKvx\nJAs3AsGIAjmbYDFoq8sZLhcKvI676l+lPwN1Bwm1s1ZQIqDWvuoGZHy+wxY6\n1Q2dw7D86RX7o+y8pWZ4EA2XXkINIy/niVH5b+j6wEUQzK79DW+OhbIsju+r\noJO0VBnd4fkevVKhpk6ZRr2WuhBjA9vWZdlo0m5jJd25Ku4ISS6z3pVctVL/\nDtBk\r\n=8Gfu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.5.0_1531909557991_0.3304690558413821","host":"s3://npm-registry-packages"}},"6.5.1":{"name":"@uifabric/merge-styles","version":"6.5.1","license":"MIT","_id":"@uifabric/merge-styles@6.5.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"60e773449111e01a055836c32c7757bb7849357d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.5.1.tgz","fileCount":185,"integrity":"sha512-sXq14T8GQD6TQ4NyFurqQJP7KJXkc1Ic3I3l2CwJb3ka44IQlw8Lu1MKXFuNs1fXdclYAaaA6pz/muJoySj0rg==","signatures":[{"sig":"MEYCIQCk4gx2XPcT3eRgIXeAew2XcTy9xbO8q9Ay5SbLEnevhgIhAOCNdxCLlfuLQDIGFwHkgAvqr6j4lncpERsUU+SHZ9+w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1041661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbUQHTCRA9TVsSAnZWagAA01QQAIPcdLHJHvjW0olBFr+z\nvLgKv74pFj/OT98sHX1N5CocmZAozf/U9vCx7dNU9UceUXEF1HBmtT/Udqif\njk/BM60kcQuqgSfZ2Ppmgzxv1Pg1Vkfg0kmXITYZQvB15YFoFP490+2ajRm8\nSagdKNkgWAzzO6lNwocXgs4M2Ub481XNR97NtO8Uqd1PHNCbeE/392PhV6QW\nEcL5g82YP0VsBe4sZssV7ZJzpTkiXnIx12sChrOu5YzOCzykAj21rCOOjk49\nRPnjNc0okyftOcTo+L7g0dZwUMbWBcpusp92l9JQfKElTYTyA32z8GPXLCtw\n8KQ+MX5VUlJf0Hj1+X3wZNp2Lewq7E0nBzRHby5fuaZTO0K4sw2zVcWPeYdy\nj63hMMteBS/cFbj2UKi+YwibmcqkmXha8zn3ToRDb9grPLIgBZ0O3rgkGJhf\nV0X2+RzwRrfjPInU67FiJH/T1c6DH1WhZAQYzgtNUx53MhKA1WxLpZgpsA11\nVYbf2ZGfUOEylTdUqK8S2Dci4n8gkaz0FxpqNEbHdkPY0EC/5bibEJmayDU2\ngEJtPW52r7Y4AeJTs5uQ2iDPtFjCPqZ42W2m4cm4xkp2+SV1abbbfOsHY02l\nUrxfd2y2mQSuSIhA9gtVNbsEVtR4p5lhVKVzDXLnqf714wtegWsMQDTO/OL/\nt7cf\r\n=oPmx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.5.1_1532035539271_0.5950390792064149","host":"s3://npm-registry-packages"}},"6.6.0":{"name":"@uifabric/merge-styles","version":"6.6.0","license":"MIT","_id":"@uifabric/merge-styles@6.6.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ca4524cde5396fd99f6edaf7338fdde984338382","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.6.0.tgz","fileCount":185,"integrity":"sha512-8SjqRNuOA+R6y26xsR59xKCVhJoSRT3lnY/lo58C53Q6s/XpaXt/0YqYYKFCbrxOzMa4V4nSygQYBDwwsskJgg==","signatures":[{"sig":"MEYCIQCtdlR41dbNUQaBrjqHXgJUdMdr7xlgMRN1sE5XnJmR6gIhAOjaB3DTvltHrnlu5Mn6kIz98G2yU8v9Zrvh26UCW2Xp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1043376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWaJyCRA9TVsSAnZWagAAHBAP/A9XbasosFw6VALrecYS\ngnqRCkUdYZAAROUn3jecwrIBT0heYRx6Pwi9/VCJTWexsEAGbelREA+3sswj\nFMTrO0scVUrZIKRUlCjJEXgJZjsB4nxJZzLkbPg+6MRPao/nhfDPbK5ERZKO\n7BRgfszUPfwJhcJaM6DdmCuj+vTqBI06VVFBhMInh25B/DhfLuOi2T2RfnGF\ngH/DtXQOjWdv6XLHNGn0QsJru+jqaOvMPluIAjVuVLidJLz3qdYxGh8owtOT\nUr0vaYIZCtHataxt0MF74h7/nagmxfEeBJ8E/pZZFTCE0uy4wOZQK3kdaCvc\n1c13csmSz0oqfERGmWRTGu9vFlh1AjNq5SPeHzDOy+WJ+z3OFQV4MsjUXOf8\n6hlAHqzeSGKENcU5kK0h6DxjFpPLvGHWRDwQGs4EL4SZi/JjqFcULRl9Bsf4\n50kMOYIYv4mkgrXiRz9gsoFSqC6obUKF9HkmLYlXPhlKzlcEOkkFE+IqInHV\nfqVh4XBz/I1jq6oXKNMgwhWeXoAfYaQ6Y7JGL43K6I8ZOujNyA5sQA2pzhnL\nz/JRZnaRDgvarlWiN/XOD+975D18qy4v6i71GVxdtk05g9SDkDmPIViICIQh\nxssrDKkAfJJcKHR7gbTk+Ku63xx2+SRslPW45e4ncjaaXnpG2ZGzkxKm1h+g\n3utM\r\n=KxD+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.6.0_1532600945872_0.873768105157757","host":"s3://npm-registry-packages"}},"6.7.0":{"name":"@uifabric/merge-styles","version":"6.7.0","license":"MIT","_id":"@uifabric/merge-styles@6.7.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"35ced1e204279998d358332ada70fd3a2792692d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.7.0.tgz","fileCount":185,"integrity":"sha512-0aYPw5OlUo6axDlm29LHZyFeJF5h8FQ4S2oOkP/xFn18754+nexCphV00lEZB8GUlawwbTCTicjBis4lxLm1nA==","signatures":[{"sig":"MEUCIBh9aZZ0b2lXj4dROaz0WgrJXwQYi7Jrzh8/JVI65NtpAiEA3aKJXGXKqTzT9zfc28Dlf6yMmzsS+KnK24mgYhGZMsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1046011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbXugHCRA9TVsSAnZWagAAUI8QAJ3VpLf4O/2ca7yEOe2k\nhR6lAjWDlMu59oDaY9U5BfqYGXhHMtapBY02NC/bPUrkYi3bE9ReIJ1+jKu3\nCuGXZ2ec/1nGCInqlvyUHAXky4H1ocSJDIXrM+O+AFefDv5+cN/7/sdmd3I7\nCKnqTw/rxoK7nNCZa1NvKQ4klskBjJckQd4Zi6lQjQ5WWX9BpnC0PLuLoABd\nwT3eSF0yly1cGFNd/aAmZTaX313I9pFvnu5rQUegeR9+wwhYjqOu8U6uuUoo\nab01cxjZaGazS1NXlgOibivjWCr8tVwyMd/sx6IabJymt6w3rwo4ZS8apNhs\nr5xADaVu7pWI5kTG4FJai4jkYQWwGzoGNW+nWQ2O32Ht7SDGvwetR60GEofD\nJnPQzCQc1suxqeM/9Te2qtV+tFzU7YI12mEq3SpcUwbdDuMj92q08qMiZ545\nanza+cXwPJj6I/Rkq199Zde0Y3PX9rCQig58U0ZfEAMHsJX3UGy9/uja4idz\nHFymX6W7as3EsNuuaaS1FaV/JN9fHA/kLR5BP7ASrLX4oV61+AZ3/ZpuYYqN\n9Z/mKvnpIxN7ihGGuurPy758IEIeOfPDElDmTYZFFTtICya4pgYL5Br69TW5\nZrH/warjAKl0QylHQgqDgR4I1dQeeYOyjcheTQOBiBLUF9pg2HY+YAKQnbAV\nhGfk\r\n=aKYK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.7.0_1532946438900_0.07991127749108307","host":"s3://npm-registry-packages"}},"6.8.0":{"name":"@uifabric/merge-styles","version":"6.8.0","license":"MIT","_id":"@uifabric/merge-styles@6.8.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"03b40dc85aa4033982076f0bfcd8ea4a187c84a1","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.8.0.tgz","fileCount":185,"integrity":"sha512-XtzYLkN2toS/8fpjL3HeYEBWK13hE+v7zCoF4XCTZzcnEwcPhi35FnLngQ74r/qU5JeIJAwKhh6i9EGMn3K9oA==","signatures":[{"sig":"MEUCIQDRB5SS/DhCTcv+7CCZxuxTxIQ1G1fnTO3fa5cPSe/IPgIgOC867qZnczNJCI5haylSetEcppCMh31kMnRuaFsyu4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1052606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbg9IoCRA9TVsSAnZWagAAnwYP/0Cz1/bHnQcZbvw6WYar\nsliCqTbyFQtunfgU8isVs2sJZGKj4YiTWNPZhLm+kzGLBHpLKwVJvkqilXRz\npxzxqYAT0crUNAPUhZTE9xJalbLXoQYeb73bMnTZK4spjnkt3PcM+65/aPRl\nHMcvh16pBs9FGe1eqLKzsZ1EDBNmN0LDubb9m580S7Wi6KI+g3sejK18kFw9\nuXBi6GTpLoSUIEnvqgzVJiCf4KKHR6iYDcWL28iQGJ+JWtcof9v8BIYPCz8j\n9+8ApEyv49vwaO83wlaosisEFdC7tJk/L7IUd/fyQUh8zSrinLLQh1W92Zxc\nUnu03Sd5ap7ux2UyluTPtLJBwW12dtBhrAXh8FBjR7ehE8o8H6RXkd94IWS9\n/eG+TxLFCXa3kp/EKg2O5w5k15FlE7hqmLi/09aKpvoucVFUz/m5czhVkMro\nS+KlgaZO5USX5KOUgexWJz7kwYT81tLfEt5cOAus2RWN1gfspLyfubHkh4RN\nqj9ppg8yFX7xjLle2a2dXFsqhsmZHw/vFuZHqTc8AUJTki7i3j5o3Czm4Icp\nd1uKkdlus/bi29sOgEJ2FRJb7QVDNbMAkcjLzml4ywnfdrWVfzDuAKNN5FII\nVxvCdvGAjPKzTusCvJnTVbJrFw+rgtACDyhEzOaSp0hNUbGLjeUmLNp0/dX/\n57+4\r\n=oyIa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.8.0_1535365671303_0.6675282185918836","host":"s3://npm-registry-packages"}},"6.8.1":{"name":"@uifabric/merge-styles","version":"6.8.1","license":"MIT","_id":"@uifabric/merge-styles@6.8.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"dc7194194ee0e0c8b95c3bfb7e9a2bb834ddab49","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.8.1.tgz","fileCount":185,"integrity":"sha512-X32PUqguncUIGzUluVap4kpaYByvDBPy8bjppPapPAB/4MnVECtsnKHYBQPfi7Ee6Zg2Wa12XYyKoBFoJ4mUAg==","signatures":[{"sig":"MEUCICnviUEGR9rd+LHq88UDKRwMT8d5qHs6YyYAFmpIfaISAiEAwYgfUfx2HrRoUw4rbjwreGii/NiuEfVKtJW0uuN7YyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1057358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhSLGCRA9TVsSAnZWagAAEWcQAJWu0FTrn4Ma1oViXoH+\nqgVQY4FY5en08VEXH9aEomICK5+/8vLKB0b0adhGoWwnXc4s8hpWItolCaZ0\nFIJln8HDNU3Oxz3i3qTsaQZSW1TRSbh4CTttK4vdrj8qJbcjHAJ4PbCY+JlY\nIEPVS2lEFZlQ4+64/4Wy1HbQJlwuWNonCNWHW7Qwf62egwh84/szN3q9gO+s\nTtyWBXft64u5fkI4NN8ZGHwcEeC7+atJwnCcyyWFxASrg/NGg8ZinDdZBMZ3\nKglG20y0HYIU4qf47K8oG2LogMXT9smKsfdpsbqoifagmxQzIoOgvdRgNYMt\nOG/cvTTouu3C6J4tLmngb9TsdqXSsiz7C8/wNoBOr2ceRaRbqqCMQisIYsUy\n9ZJN3Gmc1SzJOxzMe4VGZcKO/eqZAUgIpPaoYtqMA13o5oSc5wSjE6Ju0e/Q\nrdsbjMbk5pbZGra2VqW9WlFAEqL1JE/9B0gjXVGrtfwx76xL72tfZQMQqatC\nhsIFkrC4BcMozYslbuImWy4IoRP6t26OYpux8GnvT9z2jVK6zItL3ekUHYEw\n5O07U8yfHao3ewO4yrqYM5Hv5EMqGSuu8PD/GqpBBUvXa0t8XK4eTBZC+ybR\n6eFXipzC0pnz8VjTt3/koMPwaqF9357R1Ur7qcoFv+YB/J3F46chyR3yhwg5\n5tDU\r\n=R3ID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.8.1_1535451845400_0.9813817029689216","host":"s3://npm-registry-packages"}},"6.8.2":{"name":"@uifabric/merge-styles","version":"6.8.2","license":"MIT","_id":"@uifabric/merge-styles@6.8.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"bc8dd6d67238f91372e4b75134b69ed620ca46c5","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.8.2.tgz","fileCount":185,"integrity":"sha512-Hp1Yh62uiPDU1dclmTfmLB0rywsFpaNvHkR8IHumN38oCc9C/zAr9AQJs6pTKLDKzQJ1UpMTU2sIaArznu/mxw==","signatures":[{"sig":"MEQCIClGKjNp6abDPVOBS4p8zXi672niFAGLH3zdhjWF7ycMAiBk8w4DPu15longGXJ8oOy/5zQ1rJ1iK10GncFBIO3fdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1058627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhnViCRA9TVsSAnZWagAAxI0P/AtmBGxJejCKf6bmwtoj\nzvNOQPYMjxDttu49j8E1kPdOYt4OgKWv/Sqqww7nlRrmuInhqKAbwj2s12Rh\nBNX47HZN/sSYQL7Jah9nbh4hC3jfKJVeqMy7ladrfrCpWCpH1HAR8x8QAH8v\nUV6Mrn6v23DeXptddEUM5IxrXBQPjcaXmZNBUp4STBGXaKQuaLA0KC8GmWMK\n2ipHv6EK63kKYu/MZa0UraotUEj13EMTuljMKYfHBzjF/iBWn2hrvdQh71m/\ni4ub2ExQztyuR92z1ghjOs5cepSuzz/YFjkE4Y6mAAYPHuPE9AUe5H/gTU9x\nLvv0seAaDOhl1DDX+8e0pO8CmHNDHxeXXf6pqNpA7iO8nxNX+uJVFr/mf4Nc\nka8Fgm1iJeFhUXKFtAru7GUFpX9J0+61iepUx4T+Tu9V4WHltOTcac4ihZ5n\nI3ZBxFhY9IuOw6y7ElP/j6DgbqHC+HYWRd3lyODS/eXvBfEh49lHICBOV6cp\nVwc98ycjnqU+uuUcI8w20VNKVTA61GW4yGpClPOjU30cQPv5rrGvB+L0Tuyn\nCzVDPNo5x7VwQVOHmg7vYWxO5+VV0dH4izyr8MHBjWQi7Rt8KTG6QCLj3eLp\nczFWi/mJ7JB5Oe8b7LpqOY3SB6CfTQCioGwJeMf4+4d3K/752v3HlyPn/jJh\na6mX\r\n=r3Ma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.8.2_1535538529870_0.09035108018868088","host":"s3://npm-registry-packages"}},"6.8.3":{"name":"@uifabric/merge-styles","version":"6.8.3","license":"MIT","_id":"@uifabric/merge-styles@6.8.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f30b2ad7df96cf2a98e044245e65131a8158269a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.8.3.tgz","fileCount":185,"integrity":"sha512-WMJ3DDxscVvcSbq+BXJ9PVjdCQoFwj3QLLz8nesMQGBdl4+xgcWu8hr7iWpWFjDHPI0/dEF2q9LN92uyO4W5qw==","signatures":[{"sig":"MEUCIDmSLWfZd/KGQ9bOUuIvPc3SccX+rqfWw9NziNRxEI7OAiEA+M/YyPeK4/WvihYoVX6YtovUoepNbkQui/ALVqkG6CA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1062735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbj7ANCRA9TVsSAnZWagAA4FcP/3jClvWybuz4rF/nJy6p\ncuQG3mvCIOTsuPMBXmyGeuP514cif4Mrxb05BB5WWU3g/2G6xIOYBkqTVL0y\nQKMYhWOnYGTUzIahZQQEdZH8diQhklvUo4XFgrNMM+ZeTSIgsOZcrIQm4fpz\nkaXrGhMwjAw8BSrRP8MldDNFBy/7rDcD6TMM7nfXoxfUdpyi4SqLPorOOuzs\n0k/JlXJ646uB21vMRtqdFCM6VWHtfcAy5duNgAoaf+eTSbA7PB8pekdpoonP\nZJQpyDrO+wn5sjEoanRLqa8wQ5GDcQsj0WD17eYoPfG+bxGL/BtHRXz5C/1N\nQeKI4MiH/aPseGNDY6YT86uoNRmhYg9Bk7wXCP7wsKNUWyOLEmjAD3U8yNhx\nptR61zxp0nDFPzpbxiUAnLHkyK3CLrbOIpf+nvoCgzR2aQR5q5nrYeNscL4r\nqjeQgSQRhEU0bSSQvW5BnN2QRJ489axaqtn6YxCDBtl7jXE+1kDdktUkCnu+\nGBoLqudyWwTSO7LfWtGt6kQ7mP3TK/Z2a72YwhyDsWgAldnPZ8va8zpyy07V\nYJSCFMOL2slvhGpgdfa/smLSf/oVtEuOzENnliB+Eq2CrYdYBThd46AQvYLG\nSnLgaxU61IRnKTOZxXiuSG7kGACDZyXRKjB4PbrnpDcry26AaFETMUJaY2fE\n/kgd\r\n=HuJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.8.3_1536143373051_0.36405748737449817","host":"s3://npm-registry-packages"}},"6.8.4":{"name":"@uifabric/merge-styles","version":"6.8.4","license":"MIT","_id":"@uifabric/merge-styles@6.8.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7eaf6999072ffa37bd9fd1144813a9c2d78db204","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.8.4.tgz","fileCount":185,"integrity":"sha512-RLqc7xZJXJYUiALg1rjzG5ghaOlTUlxVtRtXWlfa8BrTJzdHAtA4xc542QeBmXp5QbH4l1hvihj9kgiNU1X3fA==","signatures":[{"sig":"MEUCIQCdVma+Z3Y3auiKSS1RiIrfhI1qvtLGexp1sHZxIpbt/gIgQ/B3YOfjJhJApocKrVGB3gseoi01R8ZXIolDP2VP6a4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1078308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmqCHCRA9TVsSAnZWagAAEdUP/Rxr42EYfDzT5Lej0wsv\ncGJVXDVC30pXZLimbKvKKgmfLM2C6bvkXszLFcCsFT6fFZMCP3zeBVnNmM41\nPP1szjuiDcyy+EOf+XBE18cTfWXaqXZ29Ba9YQqEXagG2YRT4mMNR2TN8OCt\nm7EwY3vjLPcCZb1FWAdRdhwZuMGB1JsD0sCAmU18Wb5/RZr0ApH+bWuV/Uuy\ncTJ5ifoZaS+nojuPENR85skorMnktG96LOpODTG3h22D3CPWqIa4ClIkCEsG\n4QDrOj6gt/xVjIwQ8U1v2YmB38s3gviiP4mx3M88+s08jX/BK+J9pinkxCVp\n37ep6ryyg0gIKojYDb64DxZ5N/c9jMpoxPSyj129jOf4xs9bAOjxp8uHFcuc\nlB3/5cJ4GZWfiRTj3e5EHJWf/1+aN/xd1A2QbJxg/yl2Cl6lqb6zFcccuoZK\nPPjiXfIJaY+zCVnORgcfUooaPBegymZ5mtPD5IuKIQXdUaRJ6I1XTCGzpXqb\nRPG2ypbdFs5MuRD+T7mo4RRLDAAedzmk0x8AnDucvqfW5x3UUFQEAU65dIbm\nhFRXQVjpurm9aL+r5ZHUx0nz6yBU/zqt3btFO3sEuMGIvY1XabPVmm49pWAO\nKHB+VheLRpkG3dXmLsHjUf/7fJTnwi9X2DO+jkiSoNhGvt1W13P7na4iA3yN\nBK5M\r\n=1QFY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.8.4_1536860294923_0.6675046609989774","host":"s3://npm-registry-packages"}},"6.9.0":{"name":"@uifabric/merge-styles","version":"6.9.0","license":"MIT","_id":"@uifabric/merge-styles@6.9.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9861fbef6d91dedc9f2d2d7a592d5cd37e6dd606","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.9.0.tgz","fileCount":185,"integrity":"sha512-/Zyjza5oor2cMPxMQbhA7FM1RT1LE9pBpVN6JC55Xc3m27ONROpuZfV3SucQk+gaxVIb3xV+0J92oyStdfefUg==","signatures":[{"sig":"MEUCIAXqQLOSovx6RW9aDwqcOp+mTT1nOOGg6YM7YuEbTSykAiEAhPUNFSF+2aWwf0BvNc+ZJijr/vcWA4RpatKCuhBPY/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1078906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbo5HHCRA9TVsSAnZWagAAAzMP/RTcu2FOBnt7cRnH73PZ\ng26Sv/2w8aYfYsEu6HULmXIFbZFjoizJSrRFSlMM9jI1pWuTCXvkJXouAywO\nk7jDBNyOOtPQRti6IgAFy/uxbUEwuMrhyF37ZXoqSS+h+jctGOpr/IPI7xGi\n1XKDHMLQzma+NZB21DZXkqJ2d+vzfUMyWo8QLtSnsWHT+nJtmWdEbvQfTFgH\nEFbrXyxvmFxrb9FbIXkLrBLlRpxwsgA++Yv5FOlziVIXutVFp4n8Xtuyi5mi\nQVS+aan1XNN76ul81RT1f1xGEbEAtaXtHuJt2v1kQbciE8g2iWucGzGU+FoY\nmbFanxELOxDdDLY98s1gPVC+qHpjdQ8si+mf5vGcvFvOt8sv7P1kv3VQumdr\nPZL2aLHRWf9VzucQodhJjoc4gzIIa5ejpOpTBN5Mk1iMk3OrQNUaxkYebrZ/\nQdGPO9YK1T06Y7Cn+CUMgyZ767Rz1bQRJ3Z9GWIAkfbQEDn3KwLnFU/0iuQ/\nCuKkgnWbdSH9gxW51NQb2dKVV3shPBZH7t0pGIPXJKO1LIlJA0I1Qrl+ynwv\nGf4Ka4aCW14S8OOQdg3FUdM0ukXX6sNKUnFRAVSpCYcJUykq3JgwuXLV/jD+\nmqGAdCjvPb5K6DPezGuNhzdn/8mXwFixJZhH8QWLn3rQWjfKsQMNgjLk/M5b\nBlVC\r\n=Wlh2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":false,"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.9.0_1537446342856_0.18610524745636692","host":"s3://npm-registry-packages"}},"6.9.1":{"name":"@uifabric/merge-styles","version":"6.9.1","license":"MIT","_id":"@uifabric/merge-styles@6.9.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"da173b7a978f22bae2a899ff29c7131355d4c122","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.9.1.tgz","fileCount":194,"integrity":"sha512-tq0+A4QRh7u2G+m7YaCNPhYRmwR+dHW+qa3AFufmMnJdKg+YV9jqP8BDI6zejAqpKzUM+j5+LXiQK0VXiRSPWg==","signatures":[{"sig":"MEUCID/x9W+uDtpBz+S4x+ENiRahlgAGXrRVdhfGAdDoVHXUAiEAoIrKsHZ1QurCE02LwVyPJSveZqjUT/yWR/kiI5wbe3k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1089251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpP+RCRA9TVsSAnZWagAAZJgP/2qSD5cMydXnXvPVb74u\n0OFXS76R3HhB/7OFwj574XOGh7cFkagumNCxo/SYLR+7dbdGSw5pgePLMdYO\nrpbeB/JZH9GQWnjGkHNRzIHGY3qb0HBSP2CtmyTgdNzDn1dZ/hcCSmgt977L\nUmpMueCuWtUuHO1eJ4nC9yXOH7mXz3mVIz8YyBZ2Ncm77zxwmxXwC+xu22rf\nZsYAD/kVknhER8A7kWI+zmMBHpqe08IUW+HBb1uKqyf8GIOK7Q6iKL4pNkh6\nDpcZQz5jasVZmvdayuZbnLtJlZnzxZsGErzww85/sWqSGCOW/GSqFNv2aEYX\nulH7+bSbJtmvbKr4V5EyWgpr/TOCFDy+PkD3K6u3hixGfcH3VrE0OS/uAY2G\no/ou0kzHD6T+1GS/xzWiVax1f/u5ar54Yfrp1LHvuTBwTa0UYSP6zjD7Cy7i\nEZr84+EuaC9zgNP8QnIiSWVu270iMLrd25G4XPDR5Vs8sHPf4osG5T+PuQcQ\nPkTAG8FcISqhiK4uyx/AzY3D9Hs/4/hsh2zmPCXN8AU4eAInsYLcGKrpBqjN\n248h6OuA9KyzUr8S4uLq3X9KzZMpqs8gtb/byf/L0GyILOUGpe5kNNsQTaSU\nQeQ/05CstsL0ZedecjLmLHEn9y3xaOAGG3uPhH6XerWeUzyCyNhUCriwYLup\nZEHx\r\n=C6lP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.0 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.9.1_1537539984556_0.9007804096619703","host":"s3://npm-registry-packages"}},"6.9.2":{"name":"@uifabric/merge-styles","version":"6.9.2","license":"MIT","_id":"@uifabric/merge-styles@6.9.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e80791411094b5f02c1bb32677d4432e843b477b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.9.2.tgz","fileCount":194,"integrity":"sha512-Jh7kV/H1Ut/xWcTSkgjA9BpZzePYjd8Vz8rWODIpOkYTL2BeHXz5ZdhO62Bw47EA8Jx7V8WUdxgn0ZGD8CxAPg==","signatures":[{"sig":"MEQCICI4LQVS//sO33XJPUMGxgTkcS/oZr2dtQ6iWt/WrOFGAiADYIZfqQImOazbpxrdOYkCJa2/KnJe1knRjXAQXTwdRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1091886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrh5OCRA9TVsSAnZWagAAUOEQAIO3zMowPbDdw8a6KdrJ\n6ctOX7xZBG/BPFfupY9XtpjXtN64mFUc3olL78rgV0Mz2xOoxpUqA7z5umz1\nRevAFUuhsmBRG/Mq07YdzrE3eWZEW1elM07/+5p7rZedNxLKj7WagVShiXMF\n4iZG8xe4YZ07Msvk+Rjdwml9wmS74ouOMJAq0lWgXlAt3hpuLHU4zqiVWKVt\nU+rqhpm/6os0OWxRHY++c++UJVAWTi6e9/MJV+zgycr0r8OEqFe/lzm/XzUy\nL9HWSggV6OLOmQskK1SQVax1NcqhXE3SVW1D4TO5FRFnqk+AGk5AdsoVZdDB\nHohgMDKeS89g2C0wjEfUWGuMXSP/GTb4HFw4Qyh5QQjugb18nHMJzIGquHP3\n+irBBgHbpSdbGnYUZV+aJKfV10jjg0ZJGTEB6NM3hqsn4Xam04XMiCRNALW5\nkAjX2Jj+Jb1pjT/6iu5NnsxAGhUJmkw4ndSIu7drqss1ZTl7ZtRAZ41ko47/\nDYTIfEGUwso/CawXcaWzp5Pk7bZaxfF6NMqc0fPjHj2EyHfF7Yt1AjjUa4sH\nKKyCsnmPaMbY6ihc5djVuGctHXWn3PhrLxmEucbfUFkO3HBddIXFDW/oY4Ak\nikeXsT7+4sQCrRte3mNfFUt83a1w4icHkHdCCai2x4NMenb4StRSdYczmO28\nJ7BC\r\n=RIpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.1 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.9.2_1538137678192_0.09669963032416207","host":"s3://npm-registry-packages"}},"6.9.3":{"name":"@uifabric/merge-styles","version":"6.9.3","license":"MIT","_id":"@uifabric/merge-styles@6.9.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"323e8bd62048bc9dd29e934d6c480d7ab16fb1de","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.9.3.tgz","fileCount":194,"integrity":"sha512-RU533t1KEP8TS8MCjOr5iijTvzAF9GDExm4XGctil0iSXbFqvZCru6D/XDJJ5Asou3rZf1rIWuavE3CKXrpIaA==","signatures":[{"sig":"MEUCIQCuXhEII3cNDBQE3d8xzviBgCKmZCRGhTTfV5PcyDchEAIgCAkdwhugqvsYA8R3QC5bsQ1155MyIfSGNCKJBpODow0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1092345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbshK/CRA9TVsSAnZWagAA98UP/i/5E58B+1sgdDGii8wE\nVz+zJZLwZOqnyFxfwwlubW2xH3mfdZZPiSpdJO/n2Ue4Dnto7kgn5BvDgvYq\nyNWt3HSR+BTJNKqo4shj4V98zzKNUDQ368teMf90d1Bjs7almZ9NpyTOX7a/\nGurV4JJaqkzc1saTjp5NjycZ5Jhv0hgfJKIIDam4QReTZBtn9biK7FDuKf3l\nEGOmK+/XIOPwuD+P4mgVl5lV8/YIOcBDn5Envrm/QfIr2RqQS7KuOpRPVEUk\nuNSRXyS/i2OU7bKVJOBmVSQMTjsOZSiaZYzSOVCZ0L4URHchZKLEKSgf6QAl\n3oTXqO5Xg/oqCPjJynujpeUPYpxT5mHW5Go51bhyHNlya4TSFoIm6ZYpHA/j\nBI92U0K7pKxEd27WByejVJRuXXqXiuYgv9oV9fm2Lv987ORjUIKfEzvHivsr\nlX2Gg4H6Gy3u4b/uNy9YAk3MPr6mVA4cPgw8tVEFxja+mLBNunOqvAm64f1w\no4Oi6619CLNzdd8lQmJ4kFKH3QiPmyf7eZL5o6KnFlOuUiRhnYfvrM1ab4iB\nAW+AXVMB2Vhb8a5qVHd/40ftj7g2nEbLHU5gWqLsND4XkLB1NdQ4PTc10JAr\nGYPeWC4UMO9sqWWD+lWUSTAPRT8eOzPmETQvXtOLVpiaukqn/LI9klBbrdxJ\nQOhN\r\n=m7o/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.1 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","office-ui-fabric-react-tslint":">=6.0.0 <7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.9.3_1538396861943_0.438566570769344","host":"s3://npm-registry-packages"}},"6.9.4":{"name":"@uifabric/merge-styles","version":"6.9.4","license":"MIT","_id":"@uifabric/merge-styles@6.9.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"84f25735d13410d49be147f09acfff4384cf0677","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.9.4.tgz","fileCount":194,"integrity":"sha512-JCY1v2wmb1fOFdLW264sNKFfd+WUdH+GYrMm8gLjJcnHppfbOmRpX4KR0incGrEbmW5dcXdXTZdQNaWxI89ryg==","signatures":[{"sig":"MEUCIQDTlCiAKRsW7iIl3IBanIVaFPBpHV6YQzqjPG64XuGqBQIgB9siMRbu/tEBegzGM48K/IG7McwunOaBkh04odxEZM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1093058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu0ypCRA9TVsSAnZWagAAE50QAJ+HfQEpJfJqPJlX71Rj\nxwYxG0HCc4V7mcak/br03jh2GT4sSWmHSphJpcjukoqrGSvuXOdMpPFk53Iy\nlLhar+/COdlLrcuNUCq27KAcBcd85SwAKAQ6WRelPTwFBTKTZ5IxMn9tjHb4\nf/jiQcEG6Knzp8QZR6Mtd+CmNz8wz9mQJaQCfuV6+q+7QM88ITsHFwxPoUDs\n4+dGYCHA3XFeGrS/Gjxq7AUgXE35NcQAmrDsMiY/EXK3WiQIMtM6zuijrI48\nsY30/hqwxwiN8SJrFoUVnjnsFiBBalhRrb7Ogbbzgx/JBjTNwnjZ7d6eMVzV\ncHjMhfuymc98PVyUx9LcuwvM0Wvrcp1m0qo8dt0cvZjt+c59V52yRAJt0BC4\neJKP7H1oG0AwRhMwL2NSVI+8DClmM6lgG1I3ExU6HeHJYzAbzp6pheaD26LU\nXjwt62kkhzKGtcW2iDI3mbA7Rprm4Y5I8RHuoEMwQGqdIgkUgNR0+UNbe2o9\nTLmB+hwLPMWo3Rg1gc8pD6fwlRv5qjDso3MUa3gxYoc3eZ2lclTlaDd77NIL\n+KQx1iiuSbb993WOW+no1GTLTcEHCXynlqhfCGYZHYxRkK3AbZyTLCaVGIts\n+0tFngd7dH41w2kRZDJKHB/f+vo9v6CKFwR3rP5UiunKlpqGUt9yTa63JTf3\n16Qt\r\n=PeED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.2 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.9.4_1539001512116_0.5562931241279689","host":"s3://npm-registry-packages"}},"6.10.0":{"name":"@uifabric/merge-styles","version":"6.10.0","license":"MIT","_id":"@uifabric/merge-styles@6.10.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"4cee929e8a275068c3ef770cd128044a0f6b7fa0","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.10.0.tgz","fileCount":195,"integrity":"sha512-s1FQgLfj7AqlHIB+qWCRuXfnL4LRgQVzPcBz8TQg61CRtTuiytMe9Gi0G0X1yJJxRN2/aqVm5F27KW4F0Tiy9g==","signatures":[{"sig":"MEUCIEPdcxn98rs5F2zV1rG2s9bOxqx28igZNJKo3oN7FaL5AiEAyc+vTDhZo2Dww6TkCBUNALdcJZhJsdrFmkQUpbT0p4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1096718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbv9ksCRA9TVsSAnZWagAAHcgQAIrOu1Wlw/3CdJP7r1wv\n+h6tFHW5JQU9p7li1qSVzpjPoGNbpt2hs1D20ipv9D4jsorF0ERiEGeG/+B6\ngiET4YSIDD2EiZtuuL/yznD5WwdKmSmNotUoBvoqGBLWrD11AqHfGesrakGc\nc0TGdOLxvT3+3GbwAUJyLXPRglG76S8ZTuEFxd9cz06OnxCI/O1IOEsbSJJY\nHRA6u/OEPWodbIzbFG9LL8xPSgCHkeDxE3BuSdx0K08ljYX3JS/MrmZbwcBX\nmd04ct6fL56G6HeFF83IvW+mykCeThGmGEdbY4FmQV309gU70XTpwv0UaYA2\nZFZmbOl97UOPkLp6bNtGlPIfEeDwAixodYW2zxMHnF0UOSxQmNcKnDef4Ml2\nSW12A/93aDG00G5m5vyO02UD5JY5XK45ZJ7HC7lklQL2xHSxFUt23jHLqmtc\noKndidmF8jvG6R/v0TK9MhAVoZu0BZvL52ke6ot2s+NGjAajCYRiTB90bQer\nltZOoRnPoh2CpquJgvVRgl+tkCLbNCXO8RUnq6i0+EjUXIWvg1Ada1cRJxQ1\nd+fAbcO+CTjYOfhSG1B2FX91GG9EEQlrRPQRvQZeVvQMy1uKOrU4sKtDtiyX\nXtA/ag6RZlK8581jJ6SZPou95wCMhk53LvuEL7Y1UUU+ktAsHT/U0FqTg2PM\nC+0l\r\n=Yz92\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","api-extractor":"node ../../scripts/api-extractor.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.10.0_1539299626331_0.6190409982426952","host":"s3://npm-registry-packages"}},"6.10.1":{"name":"@uifabric/merge-styles","version":"6.10.1","license":"MIT","_id":"@uifabric/merge-styles@6.10.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9b44ea9017b8e3684cb57f9ecc943ea0a1e90026","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.10.1.tgz","fileCount":195,"integrity":"sha512-ClsduzJdWh4dfE0pYUAx53sfUS1T/y1vYGRE8AgOfsyg3UbVKXUyHJ5FtEnY/u120vsEYxMFBw7WuHjIM2JhcQ==","signatures":[{"sig":"MEQCIFcqGev5hEhpuGJ79QEAcrASgrDPO8cjviFZnpP0SL1jAiB6mmk+muCoTNOi5MPAmelM+/xjWVF0FroKjm1pEQdM8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105426,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxIgsCRA9TVsSAnZWagAA4AUP/RDLaznZ+gpRQRZzf39O\nmpdtETBur3dgnrxz4LH5q/5l7pFzSibhw8HaybfvhWDSUCgal1MfRA+3XAgi\nDq8dlIc++uiFcsEIJ8D7RgHFA5dhaO/CdgZ9Xff45TpWhv1cwRYuxfZGaQsA\nZ1DugPS515nUKvt2eSgaqzF3gR1dBBJU7G5pi1snjJCBJP4jB5zUrXXJxua5\nP+xW4GkOZVpL18ORmS93fiBx3pjWp+YtQ3TpO7ZfYfu2WNT8aAMBLXDvy9E9\noV3reMo03MEq3vTIrXhoWJQLgED1+qkLt8AIQ2cFHGplJEgdwxn6bfNuIf65\nz+ARR0yec9XWZUE278mT0Mz4Cx9uDnbjRCNkI/JWULkfSsml9kl+rqFYvxw5\ng8QRDJKZS5nE1RDaGMHnBQWAkv41JTTFm+W8GOGrqEuCI5RuxQfufDzU4uTJ\nMp+tdFKYP40kxFcd13je+rhb4qvCebe9AccZxQIAidbIkN76x73L12FT4W3G\n2wTvJsoDpyzMwmEWB5Cn2b4lH95Fn93VCMay/Peq6fXNDbnfQEXygDJ37x3s\nEmcXQ7DQ/BPxrU8Uh/jqgei4BhjMuj4vZFWnErNSNGmgFwDzSqsmKn2G+6XW\nYNi43N5J0DJ8HC4Dn1cBqHjxPYH4NUYo6ZwU2o0oZVnrUNb7eCGV6M4JoQV6\nkV+m\r\n=rxID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","api-extractor":"node ../../scripts/api-extractor.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.10.1_1539606571797_0.09151873420276768","host":"s3://npm-registry-packages"}},"6.10.2":{"name":"@uifabric/merge-styles","version":"6.10.2","license":"MIT","_id":"@uifabric/merge-styles@6.10.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9f5d846c2d411f66a15c2208fb4ac8c6cbe4ca6f","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.10.2.tgz","fileCount":195,"integrity":"sha512-Fqd9Yhftpq97qamj2Nu4blPTqvXNy9JDDPlAZ3F/rsurCzbMlwLTywSmcBIyacEjpnpRH7YTRTQEUrwg3Nffrg==","signatures":[{"sig":"MEQCIEWs4CIPk+chfrdJKj685bAlU/VdEUIbLACL92Vd2GCoAiBQIywVvX5iaTN7CuZGGzwdy+USRIAYlZQPzMzV7YmMgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1105389,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyOuiCRA9TVsSAnZWagAAvlIQAJNozEjBKjBW63tktRXv\nNg11kCnnHWcbNJ9agbqZHwsrt5oTSAbsYVYRuKt+istzqCGJh+XUk+PspiEt\nFpj0XtD3mBy9Z3ytf3bRnmNK7T4l238F+IOLIPP1P09DeC6RKmES1fY+kbP4\nuD+vjXTActMJFYT9PH1Ty2w0vp9/5TtUEnngVlBbmqn/PvjUc8IRW0fXl1TA\ndYLype5Fkxejc4II7ePsQh8h7ehFX7evudeEvZNUumwDm3gKYtA1eqnLR23y\n29TtfjOuO8Nqsi/NgebaMWS/FkpKaGLTg603ZRXdAm/oIH4vhk4p+VEv0x2k\nsQAloiZu1EzoXeztFcDMTgIKzrJtfTZB9O1NP0BtbTBS3p41xOyDqpZbnxR5\nqvKj7vWZcn8ZvS/NAPeRfarJ8bkRGVCdaV5xV67edMZ6FIPjFGPR2Y1URDGV\n9OwvS6AYrfEPKqUFd2g/UCBptsbXjYJnc26fobmGjfLSTxttFx5EfZPNnG4V\nTLcVyl5BxvarEU3I9HgPQzioeyP35bKDQS6xZ60kefiCQvldtkXg4cr8j98O\n0Umke0SdXIt25ZDpUkG1HBACe5ggL3xW1uQsDFxz8dhxGJhOZv7lGV57FDIF\nF4nkzSS2pHiQSH+MsjJk6j0r94wcegnlC4g8sMmzLXxxnTfzRkK9X0OV9ETP\nGE1F\r\n=9VyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","api-extractor":"node ../../scripts/api-extractor.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.10.2_1539894177123_0.31942860700942743","host":"s3://npm-registry-packages"}},"6.10.3":{"name":"@uifabric/merge-styles","version":"6.10.3","license":"MIT","_id":"@uifabric/merge-styles@6.10.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"2429d04850da4fe5f9f0e134ec8b1fa857c8e735","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.10.3.tgz","fileCount":195,"integrity":"sha512-hlnNSkC66kO6RSBtjwWHnhoWLdswl0Q9h7qktIcWHcj83EEMy2mfY+srYMMvQH6r9VE6UC3Y4FRIjvKg3nAC5A==","signatures":[{"sig":"MEQCIGCwYaQ/4LLo2uT5k8WChO9DX83PYSB8UqDuc3eG8yAzAiBwWi3CkYIHh/asU9ilDnH2nQOz6zudOexPZVPOf9Z+Tw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1106099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzcLbCRA9TVsSAnZWagAAjSAP/1gNQO6SxQ9JcjZcHRfs\n5vg2eTEb1pztlOwBtgXBSiG6EcScZgWloU5196+V3Q/REk0pUgYy29yqf+U6\ndCxRBDqsfemfGuVaevgGiNIAsRoQdt1bCiTd1j/H+1Ius6G3kh9wKEWMKjnh\nJPTTtWfXcTytFqVRDH/yDPy5AMqjkjDi4MI9mcA+kqeuYL8kmzgTMLnLsF/o\nc0rDZt14z3MO5mY86U+A0Kvr9ed9FwULqZ7Vg/grLG6Fu34ImrUveq2zn+gq\nKqnNPX0+xIUvvX9hZHty3a23cIJ25aaOsysftLyoER67/M31I99MdfDQ06Hs\nLJ9dIWjdznPRMlQ2qeYm4VX5GbDgbOF75lsTKu2jRGD93TZ4EykFQZ6rGW4W\n6KREoBOhy3n/Wi6XMJLPRTBIoSEsTgBInKgnBVt4dhy68KVuhxEXJSaWj2WC\nblTXTyenv7aZvM5HV+VwQJLrzQ0FEyPEEflbt2Y8IBgxj4O/4XUlpwxVI/p9\n2xPgE4hMCviOZNQpxCpqLAyYj6GAtaVGhOWYPRBjJVrBocky/KRIs/MC6ls0\ncx1oKthkZ4FUslRtQ2gFntTPDA9TqecA3OthN1k8wO/pyPXwcEULbAuQdE3P\n934QIi3tkGl35bCx8s0iM51T6wuSHBUMDMikEkfsVP00fGhjkPIQzCuCbEQM\nUXry\r\n=b32a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","api-extractor":"node ../../scripts/api-extractor.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.10.3_1540211418663_0.6640724915740464","host":"s3://npm-registry-packages"}},"6.10.4":{"name":"@uifabric/merge-styles","version":"6.10.4","license":"MIT","_id":"@uifabric/merge-styles@6.10.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d69d4864165fb1049c89838f8dc1a911e65d1b06","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.10.4.tgz","fileCount":195,"integrity":"sha512-s4pXzTU+s0gPOZ9RkunS7t8jxGGPOUXLVSJ7I1DHvs4SpcDQLGZh6X7p5MpJa4BpZbE4yWDi2agRoC3V8+Df9Q==","signatures":[{"sig":"MEQCIE7NhYVM4ywICmYWKrDP8AcOtWZFTjdROpEW8zfLxsIDAiBS8V1WCOhk4zBprq7Vs3NWeugd/zCxYZoFvN9U/ZdVww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1113285,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0GWcCRA9TVsSAnZWagAAY54P/3VZT0GnFpXbTyFJfrp7\njNBUS+Z0T2WQD12LPqCBmy+4N/yUTJ9a9T8bV7phUV30PMUD1SKfi+8vxQks\n2rm9e4iB7N+KAQl5295SI5VqYHC+sh35uLpnBNmkcU+2y4O30/axZE/uhbpe\nDAsTbwINbC7zoPeAAca+02ydXB4FCXxtg0k1E66uY7yhADOBS6aXArU4tKgs\nWapic33/TDPithyufMW0HsaaVzoisOkrhvR5imXF6pwgqxGHMkdljMPTMwMM\nw3O0ssg9eWGKfHvZBKx3NQ6gafEnfKXuJ/lBMRwqupSf5EmXwWc6OUFxlk8z\npJpPwtA/hRgqMAog/O5VniJltONhYbda8FdgqVN1sfEJOcWsl3P7wPd0uV69\n9ZUQwa603CenUHgMYoJC8eKwU3zpbkMOT6hL2pJRmbzRaLjuACSxN6UoX6wo\n3oFPHPrVINZQkgw8iMvRQA3aapphssMh8IIyAKnzilGqFAkc000v32lvNulg\nj+T/RsP6oBnjskG48fytSt7Rjau9Ij987yNTnA3nJI1By8FGCg0BfJa+an8u\nc7Hzq9JlrCSYlshsBn3/uDELqzYkdw6936ETAwuQFJOEAfy3DUblbzCYrYs7\nNbJ4JGurWhlFRZHUye1xTfogqn88XERLRGf/3l6JTYf1kRX8N1yRl6ZmpBsg\nwYYK\r\n=iOSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","api-extractor":"node ../../scripts/api-extractor.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.10.4_1540384155622_0.1689899222722211","host":"s3://npm-registry-packages"}},"6.11.0":{"name":"@uifabric/merge-styles","version":"6.11.0","license":"MIT","_id":"@uifabric/merge-styles@6.11.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"afb8533c276fd23238ecf2207936a210a5ddbcd0","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.11.0.tgz","fileCount":197,"integrity":"sha512-0oeO/lMs2u6JgC41NZvR1SdfJ4wQnN3xnLezbO5waF6rG+i9RWiUIIpTyAGnAPCnbXO6IkyUDGubjlxwujiOhg==","signatures":[{"sig":"MEUCIQCxnkBK27QznXPtx0kutTOsFyRxvIJgPVoo+JIywfrkkwIgJI5fbXP1ANx4OvkbApO6fhHTsgcNvFiF4EKr8HvjaCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1144166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0wl1CRA9TVsSAnZWagAAnncP/Ra26vZ5R60F4TrHK0Ac\n1dKoFwHbrXR7YcomtfknChvaS4wK6dBOfrdFP5GlgU+0kT6tqbS8H/8Dw+6A\na+abPnqShI7gqr/ePhXW4mYYdxe4Iyw0BTaCVIYKvhlzdiqfehHJp5LTa5hK\nQIkGZoiLeAAO32BO+E1khmhn7p0ywuiwArv9HRi5+t+S5sKE/B6EsccT4aNr\nl1OaVrkdDifmq2oh3yZOxm3z2aSeCDDKPueRSoXInNolWSkNfa6/sz2hZsDy\nNeCxHen2woNTz/iRFC0G9sF8abIf1LPgIWO30xjXAjltlGEd1drM4W9wSsCl\ngNpMSMlFXEDf2jP1l1NPH9SJBR/sLhveZKVqijrLkoJtsLwbOAnbjhlbRaBu\nWEfzw0Ur4pMDg0/8g8YloeKnuiP/ArcHzgnoQ+vD6AGctNX+0Qsd4pj2jEtD\ndb4VA3HgBa6MqiUtYYVaW5R8IcS5ewDyb5xX6LXymC/X8WyR2ClJ850hJ89l\n9buBQjG6X5BdSaed5TBfcziCOBvIsn6a02tj0nxcJcjjOgU00LZQ4ZsUxtmQ\nv9Lpi8mS+QNSZGwSG9STGcG5LrjMqn5iLgRTQYgKxmfNsn/VNJ49rTbj4GZ8\n0axIlFNXz9r3RlCPWmeMDw8CG0QzrMjBmEPA7ZH1IOJU7DB2RAPdN7IfTm+J\nMMx6\r\n=3rCR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.11.0_1540557172056_0.7493307363646067","host":"s3://npm-registry-packages"}},"6.12.0":{"name":"@uifabric/merge-styles","version":"6.12.0","license":"MIT","_id":"@uifabric/merge-styles@6.12.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6ebda0f0c832216cfadbaba45d2b4aa0ab33fb13","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.12.0.tgz","fileCount":197,"integrity":"sha512-1LT95/Arqmsb6DdsINCAE6ROjUUZw/UiTacHurmbHxmPWWvczVsBa9gH3g4eCGtXWJNEs4TyE0ZItqFN7XhqKA==","signatures":[{"sig":"MEUCIHGpDBrBhYIWJKYimoMGBFlHeBpd0GqEbL77n9Yogx1mAiEAt/HjnDryRu5SZA4NYBsx8DDp/6maRshi+ottd/eoIYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1151181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb44ALCRA9TVsSAnZWagAAKJkP+QD/cPXYckgLTYfa2/mX\n8vIEw6hqtnIt+F6jWoTeU8+dQ8cBMtNwu9Mh8AMdUGbp0l5swM6pdEKAEx4c\nGEGvC0OCpue2bY82dMfX7qWASOLKGIYlN8EAC6eyXY483bEvn7to881brvzA\n1AQnEV4iCHm8geC3AZcLrPLdSBQIZq2ac+zuxjS3fvrmZFRwsNbe3lSXtj7A\nZkzKsODV+gIJVv6PaLNvye1/54h0Cj5YmzY5peN8Sc6Nk/lR73ZCM6tPMo+P\nsgx7Bi8f5iluQt4IeuxM8sw5ENbGSVvzuRQqcuSV7yXwIrfBlUdq7xjyxbi9\nvv2gJviu4f2HXAY1GScNiIMvyVnpuUoLWSAZjTzJhDjK2qgQxVnWmB+KF9a7\nV4DmwGfUJgyiF2NHk0z60tq3snIlCV+puuIQrm+WIyswdPwPtJAB9A1Th1kb\nyJWQJHFVZ+/6nFUO9wNTJpoIoeYa5nVS7+XvFSJL4eofH+DnZyr8VBNrEne3\nPR1ZFt6elyloyV0q2PrQVsYoaaLZv3su86K/0HsKItOvZEa7ka+j56mkltOE\n+uGnManhkfVkqYoXYzw7XX/ZWv1js5wAMND2tmlFYGIM89w+6dSRmKDJhXfn\neZ4+Dh3dya051Gc4UdCwyMNkrMpv3CVj8iU0uuzHAS+OQsrQIJt6xf5sMRt1\nTqSR\r\n=QTci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.12.0_1541636106508_0.8206675175183658","host":"s3://npm-registry-packages"}},"6.13.0":{"name":"@uifabric/merge-styles","version":"6.13.0","license":"MIT","_id":"@uifabric/merge-styles@6.13.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"2889845a18d46299dbb7b0730e7094be82279997","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.13.0.tgz","fileCount":197,"integrity":"sha512-vF+xo4xWCM2Uxy5MGhFxSFPjEp8ckpQbWnzs1LHE571avmU+yc3EnefwIb/eCY6SQ9C5zV0Xyt7zNAYNS4Ih0g==","signatures":[{"sig":"MEYCIQC+9S8rdyFsCrGu4VHBSdwICUoDSPzbfd7bjjadVCf4fgIhAMdC+SfECr/usSHRLVKSyzFbLFyTT6FnIgn3n2U7bF85","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1150928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb47jwCRA9TVsSAnZWagAAYuAQAJhscSILFfLOjN740yva\nIdfgCwKI0KPRiHLS5a7H4QhJ1NQPzryWIwr8HdTZ72EC52ZspTK0xTNUKZDh\n3odH6Xi6MGFfnUI+1ZA0/PCKjtoJ0MZoUPbaEXe74RBaX7NNdjVSMPDwbyZV\ngnMMFOTEftEWn3mZEl4yLhmvP3W4D4qyT09ll//OBnnW/UcE/CtNyTOWPoGt\nY0XwH4Tqhyenrb+1+4QOHvgchNMPqUbGeFhPkZDD/CG/VNmtitOw+S6M2Qn8\nrhJ8vDGmVwb7XbPE+Xuwv/dWAfpl7/Z6Pq6HNEd2oYy7Cv8BGCy76Rex++Fu\nGvZb4tJD3WPVaIIdmusJLq1UmWYoeH603XtejXS/Nh9ysTaZZwUmbwuOG9Lr\n27D2g+cwpzenaDvSi9s8a2kboRVIDg/O86pzdvLCpvi2Pn4VAnfmaUWQyL7U\nYsDaWhyQyBZWXrYs/4pLIFiMx3G2IMRV1WDUbzgcHd99tPPVjy44X/pfAM5B\nw05oFFWsfEicpQ/FsUXDeAvO0RgOIlYVwT9blWMQewOclFO3EtfnvjKtKcZz\nqUQ5WdGcSlTERth3C/0VhEbdJ4GjqxZsInKJuY8MQYKcx1oOqZ1++w13Fl8j\neuFOAmO3P+WD7T5omruC8lg5KKCzGkI5J5RFs9vT6+KR5h98CNkMCmfQln71\ndNe/\r\n=CpMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.13.0_1541650670934_0.3488369281984609","host":"s3://npm-registry-packages"}},"6.14.0":{"name":"@uifabric/merge-styles","version":"6.14.0","license":"MIT","_id":"@uifabric/merge-styles@6.14.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"30baccc2d41560678911b73dd90e3164a80a44ab","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.14.0.tgz","fileCount":197,"integrity":"sha512-KM/N6RBz4aHpQNcmvXb9jR+NbCA5ZwVD3ycIr4o8DvjGOw0nd9NxpZK49THujgVe6TFy1hFnJZlFwGupPoReqg==","signatures":[{"sig":"MEQCIAF6f9tLob3J2UiNtTL9MRzoXnBvwXF/NLP4OdEYS5YHAiAlRLDIJWnzJh/y7Y7pW/RUzYWZKJu9YHAgetnTxAOldw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1153036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb6tIfCRA9TVsSAnZWagAAwf8P/iDHfOCL1CgduAqPeDXA\nGVBG8Ru3cGzjRfOIeIAXqEnc8mHNGnBLO1zMgqlh4MiOsccvNS9qEgTP5OfW\nudiQys7meVhXXom6ecsdSP9FquKJvaQIw1B/FdX6SONEIXe/zK07QNJ1yEIi\n7gojXQ0wMfu+0R9PbcjcHSh80G9mqyv82oLNbgYdzH4qOlsTgqYJFJGA9bbt\n504ASbcjdqHNfazkI6XY3yiMeG+o2NhUrFQhT2wECpK0ujXTwBwIYRC4jHqh\nk2MEP4dvRDWGKkjQQITyuBz4olzmx977+hc4JQ3JuvsR//M9WmF1p44+0dGJ\nE0Vb3L/d849QCIG3mgVpdSmy/VORNxjIU8Zp3Md8Cp1TWrgvou/nR6HQz3Nn\n7+J3VbB2G9ymnAKXSzF2JHLx8SsjiFo8Q0ZTtorDS6t6zHQcO+dOC+SfnGs3\nHcfCGwfXhWMwqgoCnkTTZ4DoJuA98EwcKVWTc4PVOAIYiwNfVIb8KndOs9oz\ngTmUHpDjYv+NxyLaFY3JuoRyn5BCyfzGAkQVJ5VuwYrcRlFA6ocrHKCTyzCN\neDO7HqeGekKkP1CggDmGFwIMZbDKgoEIBf+AnteULAf867wzgfm7zPDQKQeg\nsh+nH/qDXn8BfI1+03hOrKErfICGDWzzawcZ7wJSvH/9qNUbpJVHXgjKuA2R\nakVz\r\n=zdoK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.14.0_1542115870354_0.0631482321983814","host":"s3://npm-registry-packages"}},"6.15.0":{"name":"@uifabric/merge-styles","version":"6.15.0","license":"MIT","_id":"@uifabric/merge-styles@6.15.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a68b514a03c9049d1c665a9fc07f58ac62c0432b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.15.0.tgz","fileCount":197,"integrity":"sha512-VtwdCPhEkfNk8l9qSw2Ix/R7a3/GguvQ2avR5RxLs7jSMmW2Oc3B0CwROB6h4zajwZK7OBR+a6UsiT7H6VN4vg==","signatures":[{"sig":"MEUCIAC/fegTjkDpLza6JU/UVya3UMsNTdJavfRl7uhecNu+AiEAx9U8n4M4w9X5GdWsqbgf7GN49h0wlDGY4ZFpFRAF4zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1150981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7XZoCRA9TVsSAnZWagAA3aUP/iSJysB4FFOlfWykafrD\nOZc9RD2UjecMDcsGts41Bbv2KIfL2l5ofBrmBKIuJ/7Lkf+2ypTVrsar3ZHT\nGVWtLqsxvuwkbc9sUnam0vQEGypoZRYwmEVt2FiBni0vnPL+coY8z69rQEXe\nVuAghdrqEM5EjDL/rjE0+wDR3lWgS2InPimaS4pGsEYhxzzn/RDLU0UP10W0\nbPsjlzIJbSclgmnfYwN4Pk92/pWRp/5GPngm/e6Is+XRE+Nu4lvwb4IEodND\npm91+59onOgo4Rg8MaOCJEnUzyGv6vAUJU/Q6s1BLo5VShFvucxWRQ3DeAIa\nKFEEYnp2jRf/p0nUPE9/OZ3HZUGwzaNubhAOUu417Df5BAhUgWEdW+P+EIb6\nC8yDiG5AnSV/a7n64pDjqpqtFfmnMX0ceeXau9cAhY9EMJElOfVVKd+UB0bg\n1U+hsweNMuD5G4QOF99HOSuzvMb2eTTtE+z1y48+DeDtawz/o+MbL7eLeRib\nJdgpe7yFsWoR/FvGSZbjN8gLgmXYyrtBb5wkoIJP1Npx+Fp0ZvV+OzeuoMrL\nh3D/cYvqWpFM8JeWICEOHptknIyDquBLjZkhW3Z1dzqzZaskrKyoOwEbzFOC\n4CEMo1h8D3rnSrcZPcx1vvxw6dhrOnbFOzSE7PPbbNF0PvaqEdVEEhZ54mUH\ntWb5\r\n=CU96\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"build":"node ../../scripts/build.js","clean":"node ../../scripts/clean.js","code-style":"node ../../scripts/code-style.js","start-test":"node ../../scripts/start-test.js","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.4.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.15.0_1542288999577_0.7271840387689719","host":"s3://npm-registry-packages"}},"6.15.1":{"name":"@uifabric/merge-styles","version":"6.15.1","license":"MIT","_id":"@uifabric/merge-styles@6.15.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"035e3a771273bc239adc0cc7257892114359d0be","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.15.1.tgz","fileCount":197,"integrity":"sha512-8Wgw+tOExd8j0j6ShtICZY6lZlvXamJgtgk8t2jGFHGS1VJ6KNG1D9zPQw0+p6xkn8PLGbMPKtQyor9Y0gddXQ==","signatures":[{"sig":"MEUCIHkpwbcNTl6BLhlR7LUXoH8HrCmiV7ukHDjCUyIuhR06AiEAmayyL71NZkFq6yHRC90trTMJi4QwMi+SvoMCtR/WNdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1163642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPBtCRA9TVsSAnZWagAAGHAP+gLJU0Zp1Xd0f1nwslGJ\n/e9Oto90Qmk9bB3XjZ3oSsLPTfCrnKY+e65c9uzXsI8WgyMgD85MInlyruw5\ndOhqHT7GhYN6garXVArg9dz4/Xu2MBr3zCYpwVNjpK1ujeaUgd5CQowQGj22\nDM6V8CFBeqxQkLT/YIOWv3a++ncsy7eMSFhuI2tSOlfd/7gqj1O0jSwUXBmI\ncWcP8glEtvNp4xyzL527C6Lr0xhHqBmzIaLHNJe+2LBaB06QnxHUy/MehVM+\nTxyyDGxYm+2fblKskg0wVYl36wOXmtMSHwoAuVo6YyXCDEIWifuokeES4cjW\nFWItB3JXPKFSOCtEAmszvSTaEZh41aj8WwEs49516I4zHlZjA/8B9Ld33KiZ\nHevJtPRwQOc1XY9PaENKCy2lK3fvVDnDIUThpgpq5ygmX1GniLsvFYOjPIEp\n4sk8Y0yWvT7h7ZnPm1ZM+rNq1OGZWg2vBW76ZTdUN+EhSpVotVvk+9ZIA8ow\nLz32dOeJRUXFVjv4Ck61gdrPpqPhi89rADn/9T2Qz6okQPtThaQ5iNEg/n0K\nZd7oUdzmb4MRjORstBtR5OTsc0sUGblPXiy34b1LvPS0r0RV0rGs/BTB1uyE\nCfamEHyNifV9L6YdRJSGay5eZg2aHv3rusUNEMk59JmWaC2P4fUu6X7MC8We\nJYhI\r\n=1Vxd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"5.6.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","build-codepen-examples","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.15.1_1548284012628_0.21581018749221204","host":"s3://npm-registry-packages"}},"6.15.2":{"name":"@uifabric/merge-styles","version":"6.15.2","license":"MIT","_id":"@uifabric/merge-styles@6.15.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"53574a4807ccb5c3730af3b21b5d6cb9a4b190ed","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.15.2.tgz","fileCount":197,"integrity":"sha512-ES/9vqHy69Do5oIDFNCJGWVRSCgXEuj/4MSZt7Rw8LCvslkeh2bYsyZh9banqDazqREWvHrPrDCaKvDzEuakTA==","signatures":[{"sig":"MEQCIDKPbxwxBXKFpXCP//+Hv023Jh8BM0Js4AMHrd1E686iAiBrna+0Lr7eKdRatVKoVS4/u+YE5DFjSE7eCYzYfylKUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1183652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUahtCRA9TVsSAnZWagAAq00QAJytwVtoyFS5ekUWhDOi\nV0Zu67UBly4i8yJDWOSGBFEYLF5OGUzcjArQEtkeK8wOqHO6sL3uZYnlvXJB\nb7rc5LhDYrbaZgOj8B4lpKRR72Ni06fplje4xGeJm/pRJeea48J9Je1+I3Lp\noOOOxYqc5ru4eVgbnBotba6U1LdxYzxPxbDX+2J7FrSXszS6rEW72mCQWJeI\n0n2kicvOUv4RjEral70i0LKxWXa1wiAm5CCu2SN56lXMUedZTvqdyvCXpBJp\nXMV/QwNlAnKnoejv3NZ2pHjZSj4ptxoG0nqe463ED5lspOZkrlVxvwl5UuXx\nXVP0H8Bq1+YQtdgApBCRkfF3yBCkxB3GDyEK2CeKm6s1hy1AifqIkALoplLL\nm5ER77h8+FSEAbmbP6S3t1WeixJT6Bhs3OvD7V1R2ORn+HKh1dUl77CIrtQX\no+JzXMmdLlFdq1d3zyYlmVKlkl8KXcIHL7pfEntUs37DXWWjiPHCJsds+vjC\nCAVSeu5l1QkeuxHf56eQvr0/5bxa5teOuDtD9M0qQBjRPiZGdxrvNgE6AbBT\nYyU3gWnZuKtOJ+SQPdr6DGsH6s7uq64dBsQKp/AiVsSguuehvjskskW4kriI\ndCeXkjYcp9imZc40Gr/2Hww7AM5HZz3Alwi6mis7wWD77/nwAkxbkLMkNbJc\nZygd\r\n=MCz1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.5.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","build-codepen-examples","karma"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.15.2_1548855404355_0.11145738629752455","host":"s3://npm-registry-packages"}},"6.16.0":{"name":"@uifabric/merge-styles","version":"6.16.0","license":"MIT","_id":"@uifabric/merge-styles@6.16.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"8ef8a9eb9390047bb08b0910a4d5747c2f76ae70","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.0.tgz","fileCount":197,"integrity":"sha512-MhFLlAaKeCQmVAQva1/Bu6Doo58l6Vo01gee6cyAKDsBxvDZrM4z1hBY+SfCpTmPvCh7TSWO1Fa9r/X5Rq5AWw==","signatures":[{"sig":"MEQCIDtkA17Av7hTRswloAZ5C7e4vsCWXU7FC0V+jEtpz7RdAiBmmKau/7fE4a6ttKyBMa0y3mk3nwXadWWamGdRVXkO/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1165410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceTSqCRA9TVsSAnZWagAAJdIP/iC+/pUXUagJezLeI1KZ\n69ODjCGyHoIUO+PcZIihogwamKY/Bdsuq30m5X5X4o+jdaUvFyUWpQIjZUMs\n0cTlpb8X+8yWVlNYYedK7ApSpI8JqxbdTUNkO4Ed5c8VuP7pfy1TsPfegSjT\n2JZFjOEB/+bBaAys8kar5qPsuOiOH5oLj8+1gzjd0NtSkbQuLNlDl0hG2sAi\nSJ5qC6dsLu36+O3yTvzR0NTpcN0MYVxoGaDxSj6oFD9A0h3/dCKdXzw6vI/7\nntE/nqx1EidTtzb0FIaUMr5s5XhKbUGGtftuBHkVOtvjCk0Wh207BrWti8s5\nHjpt9oCUSCvy/QOt4z+GY1BlopBgptDrbq04LYT8EXKPCBmNcUd/HQGYWgMZ\nksY7K5up0Jly82a/5XfvOqgvnFntL2JOMHrWOcq4+AXMt3b/RNvpLnJup0jc\nRY/U5vY0+9JeMGaIV8CoW9JwAen41V+x1vUG4JZh5NTvdvYSg5cW4esVmvqm\njlrLeuHFY/s3iUmvxD4iYopTr1ziZS8Q6JcTgcusoXY5EzRcgF/3HPrMjxNr\nC+Ojfkqb1CDYvfTBCqQWg1OLrdXiuktSjv7Ql/hojEuscPFRgwGuSjzwioEH\nXAyH5eP7eyUb6YcmNQCWq96K0stkOOOzyKq59tUT5q+zbGi2+WWuvJ4ElS0k\nWbS8\r\n=x98o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.7.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","build-codepen-examples"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.0 <2.0.0","@uifabric/prettier-rules":">=1.0.0 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.0_1551447209215_0.7218342047728075","host":"s3://npm-registry-packages"}},"6.16.1":{"name":"@uifabric/merge-styles","version":"6.16.1","license":"MIT","_id":"@uifabric/merge-styles@6.16.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"dfcbdaefd8fed815527798435b6ecd318f234965","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.1.tgz","fileCount":197,"integrity":"sha512-NEl5fBTSc6MdxKfYfkifFDWf1A9swM9Y66RsHXQ+hbVOg/kA6nLEl++RYxrSEqu4s7Fa0DRGr9TX3VFSbHN2nA==","signatures":[{"sig":"MEYCIQDl3DcTPVGGy36IOyARcw0pDprjxQqz2GWYUPMontqwDwIhALnbwqZxEmVpcnXoGMn9svk6vc5+EJ69f5xLtOY86VOE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1165957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgm7wCRA9TVsSAnZWagAA8l0P/3H2ykO0AmhroU3n6JN9\nBmQ9tBZG2iIrewcapRpkDkWIuZHV5IYvjfiSRBVGchVuGoWOelJxm/x8NHyA\nXGD++7svaV/aNezPueD1yLB0GsjDHZRrhPYcLGMkS+n0zIFzc1bqvt/Z4WqN\nUammqyJ33XPkN3tfSXdkBV8VPJAx9rqOOomYPdw1jcCFymclB8ALFDb6mquF\noqKMbuKIzucD3vo4lifJiJpIDkwb3pH532sF8+W0J/7oALgnaMOFoYKaWSjt\nnyYbWJ/aTJU5ROJKtdz1BR6+Zhf6yOYq3xmJRXhnsf/SP8BbjbxTrQBVO4mW\nawJe+j4HW+ksIiB+zKRJlcBsSedopqsO3j3htSXldSvhyKgEFoHnqZkTkTtY\niw4Tjx7n61h6xAYZMIOBP6DSQk0rpOhjWD9+qDkFWHYHWUVZQY9yj/rDFVud\nu+LK7ely3gqUzmhUOefxfOIURs47sXB1Jl4KUQMDO4orpMl4aYzj0EI3HUBQ\ngkIGW/1YwcpFvk2A0HBjBcADNa9nYzZa/9dkNfRnct3GPYEFe67QPcQwrBA5\nTykf7MMFQXCx6LMWqJ/vOMZXAiqxqsNP8dXyTy8xPW+R7cz/O1ohqSepkEkg\nv32HGHyydqdR00XWJjvPACQaEttB6Xfse2zV93sKoZ+PHEdi+UloWhzlbTue\nYXVU\r\n=9MwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.7.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass","build-codepen-examples"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.1 <2.0.0","@uifabric/prettier-rules":">=1.0.1 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.1_1552051950971_0.5303124959330447","host":"s3://npm-registry-packages"}},"7.0.0-alpha001":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha001","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha001","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"3d1bead39403bae650087a08ce510263f9188428","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha001.tgz","fileCount":198,"integrity":"sha512-szto/dmwOKQ5q/DIPyhgY9BHFk9OEj9O+RTh8yGacICwMnW+kE9aZnl3qYkgLCLceMUgRMholZ520JeE6D+0jg==","signatures":[{"sig":"MEQCIDPSllunR7ytPhkkzTsYNJrofCP3SoDqfGnBZ1JDlVPKAiB0L0oVF5pn8MHs1VWyExecgVCxD5TGMncdz9E2Gs3CGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1163581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclUAfCRA9TVsSAnZWagAAlcQP/0TYE4deZmYcUDjalGR1\nSPAsKjnw7Q4QsPMqOaTQdamQ9Csckjy/vTsaDb/Es1hxS6/dpkY1cRuf26L+\nB7xDdH7sAWCChosSwkvC2i5vtOYrizexOw9XRAGoB/EBTtRhMKOHBt9vDx7J\nPXfenrnozglD6UuwozAlZDJvMvUinb+kFE/fBzj6XGajAIP34UQsxmmFQrFO\nosGf6dsZcGv1vfMDuUsGmET/dRAAGPqffuKUeLRCoMrlJnaf9DIyofD1BOdb\nTdVwG1qeuPw8h5nVRcEwO/6pDaLLsmLouxb60wHvkoatvpzrLc2Wy51sIfPx\ntwDFNdiRqbi9xxcCf4+ucZedBPeGg2WV5drOS2Tlsm5/Pkase3TOeliHbMPJ\nO/AfaYgoYKRzQR3+c64ZMsAeB7PE+zuA5ewdvpVpsHEXR4djxL+fbWXBvjdZ\nSb3IiOVj0LGYeaabrySdowl7eZIFRDldX6Q2Ipla39AlFB5p0jHGWCdU7WJK\nrek9V/Yl0wpAdN75goFWpOVYTh9DK3YyS8X6wK/uJlziNnihhPlqSMOQ22Zv\n2ZtvP1I1Ce7exmLMf0pwDco/7pS5XuaHNlbcsVVoCA9kia6SxYQ7YvgNzDxo\npecFbmtEjFFbsd+a49nBBAtoV8msJAKhqx5IKEZ6+nha4PjEpPJuPMwQrVTm\nJxhY\r\n=5io1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha001_1553285151044_0.24884471455754453","host":"s3://npm-registry-packages"}},"7.0.0-alpha002":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha002","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha002","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9951c4bc98ac9feb05726d0e6dc20c8bf209180b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha002.tgz","fileCount":198,"integrity":"sha512-oAJnvw9PsrNhLvTEKyT6jQpzSbOuriRxf1WLcoH/WtamWVe/KD4DCtif556AmnIGpP8VHVBTYKO8u2VG5jMrhQ==","signatures":[{"sig":"MEYCIQCaXrBFn/OlelQsj8JEFRa8y9In1hdmBrqGFw8wuM6RBAIhANtObgQM7L+3F1kXWLq6iqV2IJSfI3X8KTxbdx9exHo6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1163625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmK/VCRA9TVsSAnZWagAAFqwP/iw9aZGhUGQZrDazofF1\nzyZvPpndsEoTPrpadAnzellpl2prSVE5MBt2YZSOr2P7tiw5MgocLPgc6oGG\nU8KoONlC6+0DlJl1MJiU1UEemAoOTESTa4mwnDpvAG6V/n4Mr+2JM9H0L7PS\nI/2P8trzX+QxzN8Wctrzi5M3NzX7rW1o3DsY2FW9K5zzIibcTecFI1P4kShk\nbZd8aVD4QNAxSovWLxizZrZuByHm2zkHtXYFR0pxsKlW/u0DaDPUcr4S9jxz\n1tUfid0cszEgAL9lozjSahDKJp6kFjqEQfffkkKuKrcOZ7pV1X/+Za+EjZ0m\nApYkP5YfC4oGZdMbfJOmMeyFYTkIuPJLBY9yPYUx155ckyrBsB4wZIbFajYd\nQuAvaMnx8W3W3GqW7arpW1liSWIS3ta2lUrAdNrfrSzO1ZgS7N52nHgEfMpY\n8RHN/SdXfMga8Le+1Ec85766qMxd9lG0v3jb0NW85pShm/oAUmjS+E9iDzl0\nCrt0I4iBv9oYtixIGAapXDZyPj7f0Yu+WL1s1FcUuQV2kvU8kGHxS/5TTHNL\nz859YOJq0DZca4UJOtGDNu8+0c9W/JpMGt7IxlTdhXw4i8QDIbaDPxn0Z+RO\nyo95nGtjlfDlwuEo6cAN+fPHm3kfRG54AMVjszbVeGVUO9ofAJwoOB3yLEr7\nFqqh\r\n=ehBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha002_1553510357152_0.7869952892388334","host":"s3://npm-registry-packages"}},"7.0.0-alpha003":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha003","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha003","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d4c4790577dd0434694686f7a515555d3463a96e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha003.tgz","fileCount":198,"integrity":"sha512-ZlnCu0q95J250G2Yzq7Ih2WyO67sI6qWjEVMgGa17q5MrpYyXj8oBz+YjcxsaZZ9a0X6TWnJXdhM7cyj2NK1rA==","signatures":[{"sig":"MEUCIQDdYbaJtgntKJRxPmupiutYB6kTJRFOe5JOE3lcgcpRyAIgf49o1FdK38P+ELY0IZO0TaR4lUKZeW4q3N6tvKLGMMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1163587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmlEPCRA9TVsSAnZWagAAEw8P/0Kwz1Hyi9HjLan7IgYt\ni60vdNJ5lDIY4eWeMwjGwE01S0vHG3ZuG1LHynInimiRmycwKz05bgg/A4uR\nk6kOhJkm3lF7pIVK1T1UGSJ7KocKy6lTu74kAxixGeiOGkCkfP0ndBzdkOVb\nRXxq3UyR6Lp3xjFj4ZGC0a+uw1fmKb6Ih82UX3xhNuye2dX4yRvDSRhadY9b\nMytli7q2ksYcuttHaXQa10ZOmeyBgeKJvNdFSBLBFxhIhyIrsUBZBwIOwi+g\nN6P3prdxZYbXy0d+lgXlDMkOnVlgk/AxsRfB2CI6wHJuKQ64RJK8VchSvFY1\nBKNsB4xXiqo+00P2Q+1EdQktBiZyOJqNwJQhDpEgzl1McUBK3ZVOns5Cb37F\ne8aa1HLctEf11Wa8h+DVC3g29XIALJzRg9b0kbaLSstcnJBJ/1xS24qUGBAQ\nmavgn37AFDr7kUOGB0+/MmYAYeu6IqUr9YNoulX2p9siopx0wEGc6ifaVaEy\nY5ljf7+gKS+Pl/y9yqmzZdY7jRDpzCG17sygOIQuOhQPUxiolL4E0rqwU7GJ\nZE+VzykTLaDzyZAGXgmsoYwx9b5ztRZ4+eteQfUJccjMHod6zbYRWHlmugmr\nsS2L4lDd9RadAkw0ShGyXQjMrmLraIyw8rVY+UQcm0bp+QEHN26/ECefn+cy\n3yzC\r\n=E3vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha003_1553617167053_0.4324834092223411","host":"s3://npm-registry-packages"}},"6.16.2":{"name":"@uifabric/merge-styles","version":"6.16.2","license":"MIT","_id":"@uifabric/merge-styles@6.16.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"3e3b130d137fd3ae1273cb34335d0b560a3c8e8b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.2.tgz","fileCount":198,"integrity":"sha512-fBCQc0HcH+PvFsuh8azKhNvcFjV7zWKe5j1VCmyWzC7gLZ/8zxHEyGT6ZR/k/ACgvumSPEWw6Dt6GpykOAjSeQ==","signatures":[{"sig":"MEYCIQDdSxiS7ZsfolLQcFjL+K9do5E8bwy9dLZD/w+QXYRQvQIhAIkNx1lWrmi1fXyNxhgmxtq01tRzwB1y0NQ69nQKqWzT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287920,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcm23hCRA9TVsSAnZWagAAaBwP/iHobg6AvSlJ1S/ChD6n\nKfc0Yk4yZ3x9GBydIDnixQr4oVsA0V6uL7guTQwRYccQ/6z7qaYPC3onAHk6\ngH6mnVkMLeSp/Xx/da2KHq2CTGg22RnjBAkTC6Sg6JTclNhUWlID6OdubqTk\nZ58CohZuZ4NLS56Zxq0cYMjReuFFLINch7UBvTCLruGc+4P6bwnbY/XYymDQ\nKINJYqstSRH3rYBvGoUk5YW7RltWvos4yscKm4JBb5afBcEAQcetSCsOo27v\nz5rnd0bjAkHi9dQUSajRSnpik3vPBYadDaw1bSKIERP/GJk5ElYjbnQPOhW2\nowBek27MkPyvk46R79LxsL8rdbqrWy1cNF5dEliRpWRCtp9cUbU0y5Zi2Olk\nwutLvt64TO1JPSCv80voPSL7fMUtAskdN0becx/tVEeyhkRm+1uVEBi7cikf\nVskOTJ8xaMYDhctAYmkZc5UIj2DtXDQkDOXQrpdZZWRHKJq3BtQTxHikhV0M\nL37EMHXDNcXl+6CvU5GWHJNeOcspugbslr9UHKavAAvf9HYGGvTOxRoZfSvf\njmeT5i5TThNZ/Lhvp4IQ1rKzdvonydbS89SoOBNM0YvDDAEU58AKUiC1BD+V\nPTnj6QbxeyiI2o+D/j60ijkw1VNdeln7Y2N/GhqqNwwdw9KhAeBF0Zk3ArGJ\nvJ/I\r\n=1PHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.1 <2.0.0","@uifabric/prettier-rules":">=1.0.1 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.2_1553690079993_0.8938497886886478","host":"s3://npm-registry-packages"}},"6.16.3":{"name":"@uifabric/merge-styles","version":"6.16.3","license":"MIT","_id":"@uifabric/merge-styles@6.16.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6c978f4201d10705702acec2d29cacd084d15c72","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.3.tgz","fileCount":197,"integrity":"sha512-Ys+wKB/EgFXQ4Z7X1LxI+QqJ4sOGhhF9WmGREiPZKvAD/IfO16em9RedBN0y83UfpRSrCnDnCBbXJJsc3Xdtcg==","signatures":[{"sig":"MEYCIQCRsFhjEDnbfQG2yKqnm5+eazaOeQ+/2YaBL9FdAALxmgIhAIN+ahuKTNAcj3yrHo8kwwhWCWHgQ8R8V6bl78U10+Ah","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1276450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcogYNCRA9TVsSAnZWagAAGJMQAKH6VtvejS6hP1gnKJTZ\nkuJvrqF/JALFcVHRi/8s4c5D64mnkd4jlAgwXrTEQnn52oyXFB5JbGdZZVkZ\nF4BhkNkdYfY5LUYIHhWmtDsPgJnafZh42IEJ+w74C2YwvetVmVrtWA6DtLyY\ntyjKEz54PemVuxIkqwvbMOXvyTuG012fOHUrXJ9bxz0dDNV+r0kgrks5/2Ga\nl19P990h8RwxqvU2pUZ9QDxZloJvPgg+L5vLogG/nw6ssfBXPdgKG/GEL+K0\nBUysjGCWLj53Kua0RXuELch6JsREgFJaZBdhPZx7P0PEPGoqZOP+J91x3wIa\nwEKKcft4xbdFr1oRN//Gpr+c/8A/TjljvY095w7SZSBnLMKm0ts1m62yKSqZ\niAQbVMO2TxMoCujiyNn0AsciS2FKeaTA3fnm29OrNhcRThAuodIP8qFi0JD5\n2kexY9+4fSh6nr//c4kcT9D703tAeNmuy32pLC1vgNxMkjCKJxPtC/h3eT4M\nsxBBr1crdUJKjgfEZFQvXNpgdCUn6JxuwZXjkSV0gxEG3F2rZ7onIMY2GIxD\nPSaqETlXIRskyU6GkviMRdXvnXYw6VXrnkEPxe/gvSdX/ddPpV+euXcFtCtN\nVbwwv9jgu5QbTOMr7T4F2EmXOStWiBGHfkFX2y5Anq1cIP1jZAraw6N0O6nJ\n5M+3\r\n=PanR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=1.1.3 <2.0.0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=1.0.1 <2.0.0","@uifabric/prettier-rules":">=1.0.1 <2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.3_1554122252706_0.8495847183652485","host":"s3://npm-registry-packages"}},"7.0.0-alpha004":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha004","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha004","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"769829b8aaab1873df4b851da6f722b319d8f1a1","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha004.tgz","fileCount":197,"integrity":"sha512-O4BsKF/QSG5DR8kf15t3OxoQrqzFqj9FmSDxM0PMI5qJyZLjdoJRogECvkCqXCZgTD5sayzeHVR8/aGzzB9RLw==","signatures":[{"sig":"MEQCIG777xvrF0u91ae8LP7j4KkLeV2LXuuVL2y95nFnjU3nAiBLxaNn6Vjr3fSNOt9uMLRbWG74lvELZ2I+6epe2uk+9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274077,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcolcPCRA9TVsSAnZWagAAHH4P/R3E8XKptl/SLZuqJtw3\n3QX2vx2THBxUHIaK2htGv9f6eWSfNp+h/g1/+HgV4spc3i/1/EWQ8dzIhkme\n5KypsOP+fdZf078omaM9a6nsx2/MpJXD5KdT6uYJ09QN3ZI++mUybjpgx68f\nuoOFHNFVdkFu7ms6YRamBKrtm3H/cbZhl83M0UIomTdFAuZ37n+JHfHYhOkK\nahZdjR7ZR1S7nvvt7hmdZM0mFWSuYrZU0uZ3gto7IjO1irI+NNjWM07gGndf\n1/S3J45XULEk25IE8M70sVLOygyzutvHxocsDi87gJbGeAxPxOwZkQ5W/JRy\nq8fw5Lf3wff94nIQicxFa8pRFe8JftajbdkdVVLGrstAGD+2d7IqAuyVKfy2\nacIX7dwfIAWCDqcQVMYewqSL+5h+0PoJ/hl8kS3W3vb1ggfn0cebtf9P2yRu\nQeGm0tbJguY0eb8cK95rALgd4YUuE1k2vd93DecX9QeuB6e5hi18RbbYR9ko\n1DKTZPQKE52+j9QOZXoHdQk2iwp3DzosjzWloYxpVY2U0l9FTjCgg/Y4Npz+\nI89WigkM2vUPvVyhBz4oOA1YFeZinbF4/Ph/EGS7Dg/sy5kEc+RiV3DrWlZe\nJrcwh+scj5XAUFo+CBfz1VNs0d1v7SBUtGyx2yJaWDmh/FZKFFfvgAovdR3Q\nTI8C\r\n=Y89/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha004_1554142991037_0.6144125305187691","host":"s3://npm-registry-packages"}},"6.16.4":{"name":"@uifabric/merge-styles","version":"6.16.4","license":"MIT","_id":"@uifabric/merge-styles@6.16.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"07cdbc29ecd4acc60e957469749e25c84601dbfa","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.4.tgz","fileCount":197,"integrity":"sha512-z69v0XjyHZmQOTC0fMmUUN8yPv2pWfV8ZsrJSbFazKqT/K0WBkZJPXRpCdM9wxYUcFyrKYfFzLNzmGwES1WXZQ==","signatures":[{"sig":"MEUCIQDhsGz1hF1T6OaTfuEGhqqj9hVXuxhcRsGVzo6YuFFhegIgJVZESDLroV1tJPuv0sHNm7jyt6qX3R80j1Xxlj+T2zM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1276898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoq9BCRA9TVsSAnZWagAAvY4P/iEUrFzyPKXWnS5H/FuA\n00ShJOX04zuLEffO7QVlgNPl3RpcmTr+2jtFswYWW+r9CJW9AeTSqRILeJvK\nLn92J6V0XKtlDFl0JYsHBvA4gjKiisTAC/2/Np5a8s2MgHT4ATqMz8OvD31D\nz69BFv+4UydD+t2GCZBJ5TfYIpIfihYfc9jPnvvDDlw4YslIXAljcBr90W05\nk2FvR3sPnI+wJjp9pH2IWt/CZrjyDDsfaqXlpzvgp8FFuBZOzDXWfx8OqklZ\nxbeY5Z7T4S1hWQ0eTRx5f4FEgpXwU/OYHR1/yQcKY34rrXzvbpJQwF0jSgkI\n4s0GxydK2f2obi5K22Dc03MQ1Vco8FXL81USLjh9B3Bz2zYstpdZe1uYDKmV\nUbdnvRZnhhpO0idNLMc3fo++tnL2re8TYXmMGai6wyIy3rB8BMDJ0lWFO6FT\njSjmZZ5WB/23yTbwRkdpNY8P7F+T5QdstYgORF1KG60xvzzsDGI5vafAApBX\nkR/shimxrl1DYzuLbadCBIYfU6okQu1nSHXJr/tpOhPo0NScAB+oJjGDCyv2\nszrPLQw26GhEHSo8ezwhCtE+vYitylR+/C2eP2DWdm87UO92Rh5Tt+MoijjJ\nGh+6RLLW6+4a/bhEMIkil0jU8PS7r7N2TPpgRnnUZJQ/Kj3Yu6abXggZybDx\ncIzK\r\n=LS/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.1","@uifabric/prettier-rules":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.4_1554165568384_0.9891197711146527","host":"s3://npm-registry-packages"}},"7.0.0-alpha006":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha006","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha006","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"5cd3637cbf0303beabd58e2186a59a9533a9403a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha006.tgz","fileCount":197,"integrity":"sha512-eNQeiYOMmBnUtvW5wp4rOxt0YmjE9oTPcoK62RI9av6Fdkq6coldYlvY5PMvLQVsoH/HTQQJZ6uZ0cxxQo78Ig==","signatures":[{"sig":"MEQCIC4Y9mlPdWODFu+HsF6rgqhUWj8tyb8fYMuzxo+F9wCUAiAOWRQZGOWK1aIO4dVDEL6PwSjk1/FudL9tE1uKYlJRfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpd7RCRA9TVsSAnZWagAAijUQAJeZT9snpsrLXJ8EQGW9\nDUxKq7WwDosmEMEWNj769yQ/9axa9XCArEtHAafAFMQwz26Q9dNy1sKpstHf\nsu7XnBFETswFHGvkvhJMbiq7hzxnjbZoGqpvWsFP1H9n8SMFFaVmzu/snATh\nHL83P4ZbEgh19w8oGXsh0TyoCMaQ/GsUM2iz+lsAZ++/NXkb9wDcsZ+O4usa\n6gj0HKwk95OMvlQpS8r86C5NtFiCi6WaAKNfv99mdpiQApfkEuiKrXMdhVlb\netpSOVEHTKDwxh+qrfsevpx9PcFxYbgugyvCyF28NURE0QwJoDpXfGanTuHk\niNEewg0/B2UFyLTXlrCIGFiY7IB8TX6ywZzvm2rYtZFhrS6F3PzzlzvrW6dY\naN0+OpwnWtapnxK01NmbjfEVSepmp/pfH+l8XOWYB522KYc/WLYY1HPZ5OtG\nTIZ0F8oJkaS9vw1BVn9+wtgzJZzdJX8AptMv1vTCjQ7v5ZPwUWtJTmVF+cio\ngIxSsdeAVfSoNWJchNCCE1Prdn0YRqESPvjvkt77NkeUwirzXXO5FeQlB4cq\nRnR/vZg6Rn9i4EtKUEpgHtnqnOHs8A6bNeEUIv6D2gWR7voAiVks6wVtOOH3\neY6iFiaj03p6kmPjb+VB73P4xuGhNMnHqFhBAZPW58UQ/2hRFS3I+cCEgYbN\ncLEl\r\n=82sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha006_1554374352594_0.6645982773398711","host":"s3://npm-registry-packages"}},"7.0.0-alpha007":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha007","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha007","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"90d81e56c8f007ee6c4c9f87a55f467e8eb7a544","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha007.tgz","fileCount":197,"integrity":"sha512-RgRXipxblKd8vVdkfIpAv04ovBD5+gW8ADgZ4yyuQqk4UZJglvWAFAmWsu/4OuoLYzONLcYuQ+YtC+8dqYzLUw==","signatures":[{"sig":"MEQCIEvt8RNWaqaGYdSBfCcUx64ZAiU+vGZjXxpd4mtOQ0QaAiA1PQGckspiZfJ2h9X46VgnKiej6WsPBb/5roaBwU3jtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274622,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpoguCRA9TVsSAnZWagAA35EQAIXlAqvtt8mpnQCWHFGt\nwF5odvFPytbk1DmYuMiUuIICS/sqBW04zeUSKXFXKLfjuTY/cjTaXlch3wb2\nU9yfwQw0EbESqTh3Bi4NuW6AtBUheC9Sc2EfAIe6RQojTqNGAAOXi9cRwNID\nHQsSqPvVrllqZZoJEudaoB3LliPj49714TDjEqFm/RMWIGPbsf/tiaPCt9lh\nxgu3TBIjyjYXLquVmR2L+UkWUMHKOJXd3uU+00SW3NNrRSzxK1+VZjKuJauN\n1KKUHczwVubwKcCTpkNbOuTJVthK/N/I5vLKengjGen7Z9xdFo+LX/oyXBS3\nGwi374KW48t4aHp+uGwPj89O4qFosvnzF4tiOaFkPfjBRCnVrWpgUQ0qy5kg\nEepyGuWl3mt8i+Lv1gRjoXDNRGO/6CqLFdbRkfeSORuS4vnb9WxqgqoDmUGe\nsl+5Ylavgf2EjmmjBUoXOyde2vfihCjawdiLpaiH0m9FpJ/5lvRX1R2aG1Sg\nGajmVesspQJIXRKGQqzAjQfzXZGKoTZAbfwzbYpD5T+ljF25/I4xulWBaSoa\n07SG+7vwEpPPHWdhtYa4vpqbrFXDKU0cga8+MRcQc+hABnU+ZKXJPRop+8Fk\nN6BD0v8Y9Y+8ivGSdlCi861Yun7Vdl8h97AACXwzLbwA8Z0zFu1L9xUTObCM\nvxCc\r\n=3LU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha007_1554417709252_0.14842422915329556","host":"s3://npm-registry-packages"}},"7.0.0-alpha008":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha008","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha008","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6cc301def8d9297e69eeb2486e3eb7dcd602df62","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha008.tgz","fileCount":197,"integrity":"sha512-88RkDPUFfnEN+Ys+BiknVJ/wgBGXBSMH0CMEt+c/LmVs+n0GkKCK/H4XK/X30fqosiohYSSjt6K92XEAZvevzQ==","signatures":[{"sig":"MEQCIAnsPzGqI0zgw2SLr5GcUm14za3iaA5Y56bl2M2LHfd6AiA5CBD4wMZ8O3xmo6O0Yo8ABdBVuQr5Ow1+1vowYhqLVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpphTCRA9TVsSAnZWagAA2ZEP/3WL0IkDusW11wXL6N61\nZi8M9Dxn0FOMqB78H9VEYSRJe4jcLtrQTngfudcbsCy30VN7c5fXooa5TBYk\nlUAG9Yd8AenkmGcO/4c7htgRezE0llook3MwZf9k+Jh363cWXOchgbcJIxj5\n83nhceAqQmClbxPxW8elYq1gmpuC3mbYLRpaM+QQU1TixNCv7oOg7TO/rHIv\n80q3hWJqwM/MRgbhjEZg/GYDl4ozi85Liq2IsvH30V20IGoeXcgMZWNFXMnC\nHORBVx3Zrd+rU7xMJVwPwG+9ZxOOEZ/UDhGX//M3xx9GfO6u2sccHTHyg3V4\n/zsiaU7MAKGhoGy8T3/x/weGXfVVns7sgXrLcXPkuAoQNtpXrCpjKvH8xfWY\n0n++nmMkspMyP3fwDAjc9wfsSzaJwj9SAxPAYPiGj5m0PdTFaet2+dyTCDLy\ntxQcf69mSyAlpcfpIJX1HJYMUlXGKehEf+aqZv2BpCeRCrrWsBnPeN1fiDT5\nduX3M+hwukYSwyUsPDfEdmojVO328rpD0J4bj6lg3DENnnU/gY3CXG4My7N4\ntdQwQTx2zyXErekmpzcJNmskr4j4lCG4lODRbCq4oQV/tZkFQfKfAG/hDnGk\nHZzu6c56A8lGsYk0q+3ScjL/niwB98PKVp8ogLpuZWoCI9PQslGk5ndFf7Zd\np0de\r\n=6P+Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha008_1554421842873_0.3984803460668629","host":"s3://npm-registry-packages"}},"7.0.0-alpha010":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha010","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha010","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"267f5d98275b04356c1f0058ebbcb5e4a02565ae","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha010.tgz","fileCount":197,"integrity":"sha512-zgxE9E/3SFdfLdQv9OVmGL5xYLQ7e/lftYnJH305PBDA88uhA7BreByCrBKEPQDMbvj1RH2VbWYkwODdxZRweA==","signatures":[{"sig":"MEQCIEXzq8ZD8KdaBN+9G49F4ncBtlveI2gAFFJKGXEGUQ1QAiBqkqCzEbA33Z66YqR11QU6QP60vxukVz6Mw793bbmXUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpqkkCRA9TVsSAnZWagAAqVYP/28kzfta1wxqwjRP3T35\n0OH7dWMIk3pbf26VAfiyIFZqZILn5vDsRC9BPOX4cUU8pcE5vVhBvHVYDZ1J\naFWtOfQF0X6oWl8EPpRCDaSGkc71D7gXyQug1PA9JMmTLDmgXL5e1V9Qawij\n+5/CZ862r4+FGxDvW7g5OcekRrHKM2jhzhNRJDudUErTdEV+xtmgUXNgAHiE\n+vizOqjlgrrYMnCiOPsc6TSCOYq4sJ3PO3HI8KgBaXCINsWCdRtZqOaCg3bR\nh+oEnlmkLDMSTa6D4l5WeZ9dZvvWfgcRzv6nyhoGmTRyfdH4A7L87u1IwD9t\noBhqu07fuJxsa5vFaOQjB7Xefl8RpjstGxk2Ofrn/mnkobhD2XVYubUCderw\nAEiCTo211evX6cgBxDfhBqVgUbvGzNMFmEed0Fjn/0+XaAh4MsC0xZ0rdnEH\n8MMrrhoQ1+7QZmj4Mr6YnHx+NHy9Jr3UOhcuK4hJ+UYHa4UVnazcH//NjN9L\nB6LiPm7EouhyBX3oaVI2D8n8R2h32aueCjLAg02Z/Wn35l4t5KCKdVBHN6LX\nStABcv/Uccs4NaRNSxF1akWRWnGm4IdOGwDn0wXRShiUZgi4wsXszWgVYpOD\n3xrw5QWjVovg0/XMd/iRScVULV0YnAAdWox1TWokyeTi1NEy66dvhU4wX7B3\neDPq\r\n=BrqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha010_1554426148025_0.8673883958528066","host":"s3://npm-registry-packages"}},"7.0.0-alpha011":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha011","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha011","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9226db4a64a62634ef95558a572c9cbda4a4423f","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha011.tgz","fileCount":197,"integrity":"sha512-O1r6YBlWzKC9Dh278lZq2VAj2EPZZctD0f3r7i/jdzqhKTWV8Xs25cLtsIEYvD1kBYelrfOV36hCoS9PaknhWQ==","signatures":[{"sig":"MEYCIQDcvhUqIg9HNpoPFU649+V/wTFtQ3ERcYHNnf7JN2cetQIhAJ8Aj5rTOhwaxqdtRCyWLpObycXIVvPRWvEmIMGO/q0O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1274059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqyTDCRA9TVsSAnZWagAAsRIP+gMiKv8a3egweEqrh95P\nentlKNovACy0mnKHJi/K3GiIn/R/2WGxip2Wwowhsss4vwms/6wx/ypovHbe\nWZNeU89l28Yh26WgbHilte6chgHvmS028njW5l28qm69i/7pt4DvYsop3WvC\nPgg7Ru30FY4Bx04fdsFsOK6PvNdzlGKt+eVbn1NLVBB2+r+7QzMRVGF0v33k\njCQ2K/kmSSuZ/Kc0k+gEGLaVpNgO0rKdYShq4QGS9uyr/of/AqHPUx6AK/MT\nyG68oC32a6d6bwKfKOzCS0xNGQCWjWDvFL2tiTvpybcBdYdbsJAe0qr4pMdg\nBmLdZzPKcGfv6TqnSid0DgSBt/LxaSg+nUcfPiNGIRSKj71f3tCFIGm3IVfM\nM9ZVtEgb7jHhleEP/0Iyr2UYuJ12DYjAa3WeUy+TUisMJF8DLTAEwio+OKLB\ndk5yndDbvD8FexWjgj60ST0ZVDC7LxB8tkeIQkkpm8cbPb8esa4huz4m5fNQ\nztj/ETbNAHmGYRnlRnWYQidegvT0FfkGJV+llkPO5Bvu/efQG14LxtUVrAQK\nRCLshjFfwmVwHIlAg1imHRFfz1CSRHLd+l/SGiV3JRJ5H0KJmnuLMGjV1InU\n9xQg4qT0Llm+Dd9Z8fMUzXM/HyFgNyNVbK8FqW9VMecsU2K8tLjHhk+39Wng\ncb+H\r\n=sZPT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha011_1554719938755_0.4203396630057241","host":"s3://npm-registry-packages"}},"6.16.5":{"name":"@uifabric/merge-styles","version":"6.16.5","license":"MIT","_id":"@uifabric/merge-styles@6.16.5","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"c10f046d547f2f295635c197cc16b0c687d7bfb6","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.16.5.tgz","fileCount":197,"integrity":"sha512-zUzVxabq6E2AAY6h+WU6W4L4de9J+mIjZg3q/4bzna1hEQgccCZkVyHg7OesJAylPzp4lYP3KWKP9hRaOZlnhg==","signatures":[{"sig":"MEYCIQDliENQ7EJ5PS/dHDihDHVB1vOJ41929iGQrS2OroNnGwIhAIYfRuUHylTliiXLgfl1VoRICz3k94VcQzKNtDKf7/Gp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1647785,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrzUPCRA9TVsSAnZWagAAqJwP/1YR2x3t5ugoD1ymcA7j\nHr8lUwRyT9K+ObF0zo6wAFtWHWIDjSKuc9i2kY0xQFM7Qmbda2mfxVyo5g+f\neKraJd1nltcuOHtzEMN/lRYi7LvgDK0g13ooXrwo94OaY9Qf+/9Byxn/rQ0n\nEaejjSWXh7R/vwHmT5PMp2BxPGGqD50sAZxsy0l/EGBjA/+V13HSj7N5rZWZ\ny9En6k8E6Wr8hjFA5WhDWVPZvApxlylSO00LBsahYCJZSUYLC0RfFxJ8sxQC\nASVUDq8AtZPl9i0vKWOWIfyQi1DUcAO7UPf1QZs4vfpKownaWEQ708rtbIAE\njOmNYRVvhWjbtCFZQaYGEnIRUtOxZyebYAGW4cpr7r3NLGZ+rmXYD2NatyAY\njtg6gZJrczwzwbhF6sfK5iJi25x8QcZh23d3mb4b12gzIE34tMyI2099siLl\n87hpKIbrwJ5sTMbldVnT5qfnehR1mCuOuotjr2y8O+ClPiqfpYWAo7/88tk6\nft8ESizE9WyC7+Kb8FCIz1yZOT/0NH4aQOf8DojMFqEIHkdvoUgu9jKed0mH\nMh+iJJclLNoK/Fni0W4vlrV6yQMnqtLFDLhnULqNBqKLEG36wdfNt06s0eJW\n1iRXxiRcuKnC7LfpagCYbX23YBfRHEOssowfcYNpvtaBl/H030tJUBh9oAav\n7uwl\r\n=lhVR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.1","@uifabric/prettier-rules":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.16.5_1554986254674_0.33476052666504974","host":"s3://npm-registry-packages"}},"7.0.0-alpha012":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha012","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha012","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9ce53ca2f6561d79c9fb5ab720d6b8655f799fbf","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha012.tgz","fileCount":197,"integrity":"sha512-YZRT3fZdZhSE3xu+z4az0HkWGL5farJmRIqUEUz0rtOyceIGFopcvCx2jT1/T9nFiac/nCp4guq2EoXFp/yHjA==","signatures":[{"sig":"MEYCIQCvGNnWDmKzatudYCn7RovCQGBY6gwSCXt3AjUqc0CeHgIhAMTfvN/8Jt5VnRWCer0np67BwbkUULTdupiC3934cJ+i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1644369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr6tTCRA9TVsSAnZWagAAFVgP/jscR5VMDVujV9wt7tiT\nia5yS+g7MBJ0wSsU28V68rdt3VcPkhseXZA4xsqWiZWGURlx1LhM9+WDao6g\nTsZZo0mfF/bF6EsO7EVd0IoErWwueaVsY5IZGnTqeKhKN8Sc9TQGC1brZA5g\npVtzAPSpWr93ISydyuzmGCK7pz2F9d0UQUC1EhSHUve1ww5yU/RP+8+jIBTK\n08yOqGeyZgHI/DRfgHAya5I0H7GQ4pmSBHWBgHeds+yWIL5X8GXzbma38C92\n1MN4mf9vMqAS7ux4ScisrJtU/MmQIjPFhMacmedbcTcjvsrbL1u4ak0u2BFS\nfoIUMBIxFreRoZVGfJSb1UqT/tIkw0GB7iGBnTR7juwtKpUwHS2E6yGB12OJ\nH0SufbDWQzI1aB92WYVNbMnD44MKU5h0iCfxg27f6cF2tpUP2xB83WNQssUb\nGK05cOu+4UvrdKYkvPBrGid085dBB06brPx4vNLBeAcpWSNOi1xKF8uy+Bfa\nNCpx7Hu/foAI0rky641shP3+ovYLjMc0zIUERcR72Ohz5nxCoqcRX+SB4lSc\nz2o0cl94yyVC3TCTTCUHuzkjChmEn7CXUvcBERdjO0LXm2ugNHmeY9ITDxRz\nMx6eL4NmRvbdLzCZEgvkOdbCq6pqCZELOXXfG/EB0/5irKQic2ULYnRketsk\n/yFf\r\n=2RTR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha012_1555016531104_0.607776909090813","host":"s3://npm-registry-packages"}},"7.0.0-alpha013":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha013","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha013","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ab80210331a27b4cd4bbe545bd1149be082b1e1d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha013.tgz","fileCount":197,"integrity":"sha512-mcwS0JJ3VTvW3Fo50JlLJUDyMX9KpxuwFB6dQeGAS0K42PnAFfvAsqxWeCz3R29B0ebRMtnW6b7DzYsMfzs3cw==","signatures":[{"sig":"MEYCIQDRH9Z9GRO7gMB5tetlzUOJ6UOepQlK+LsJqk4AtHMkmwIhAMlIIV5y09R2ccP1bxE8+r3u0Lm+PSA1OIEMsKAwaRYi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1644461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcs7SrCRA9TVsSAnZWagAAVZYQAIdGAVq9Ve4F2R0Qnxig\n2YOTiHHJDASzfggpbrXI0PFzD/8+X3Wf62BVKwp+qQ47njYubeE+N3JPlW5+\n+S2x9k2F8EhBoaByc9fDAz7Wv/rCK57uTeHLP5QRIBxFHNOK4GFtK+vgoJmg\nItaywz8LW3UomWYpHVJH11gIglPzZ8xABMndM1rsNGEzMAejTMYxw2T/MYpW\nB6wChD1STHfPH5FxOCJQ95Y4F/zpeawQBmUkwOcN/LkSL8bG1S4YwDqZs51w\n8ocTTtIYvOy3PPqhGZdqVlQMW9MPHkLasLl3Ma83pBjF/ds69NB2v+c4nUzV\n1D3r9UxsXbJv6nJfgeuRfjguu34S4aCfm07F/cC3d9U+1/c6fZ35FT8JmvX9\niok+srAfKqIYlZBwnnI1vHwsU2K4fc+LKugL6SenZ7oYbH+wiyTrTbeJAtlW\nWJ+cwX0NbYGagK6uCKEkc74IykRT4HaFHejQKlqH1n0iJWvWJz2/uXCfea0v\nvMl+PKlxOVSznvy8T+CMI7rKis4WhkrRYYs9DdhjdzZUEry8C4uH1QPe3Ufi\nbOmlMFIu2lM4GPD2GGKSOCuDTCjkAYV65IS+zFFPag1Z2zWNy8aIvoiV0prE\nVEUm3lX1LY6xOcuxRVPBCRDAnKcv0KOEMGc/TinS4qr8gJ5uOHYwkDs2aQrc\nmvFq\r\n=B1tv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha013_1555281066992_0.22016942364617242","host":"s3://npm-registry-packages"}},"7.0.0-alpha014":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha014","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha014","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d679b49f05d47a7439be73fba3a29ef9d6fc4a05","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha014.tgz","fileCount":197,"integrity":"sha512-JfuygjS89UwPlV2KOOWQRU01LTaShvYz6AhGUADJVzz+uyQ2G/1YBPira60zut9ozTplLOkbZLeG8P1WrQXWXw==","signatures":[{"sig":"MEYCIQD+NOoicy7UA8Zcv4Wopp8yrRISz0+RadrcAPmquW4OEwIhALg9ymsZAQ9GLodd9AK954sX6NiiUv6qLgi5X+STPh4i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1644409,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcs9bFCRA9TVsSAnZWagAAc+IQAIfUvxrVDpZzg00qwQY8\n9U22/7zankVuOAnAxDrXJxN+Ovv7sdEARCwg8aQBwgAazK/2Lzdul4CvvGQU\nQtybmeFaEn3AIO6IxCRI7AsimMEWSTVNOk2/QcH56Kc23blLgV1oRskpWg2d\nQ5hDMSQ9/zcnNrpBjXQINqp9Xrl381HyFbu/V6/2nnQ0mCmcIsWqdGl1+RM4\n+NB8etFBHN2jkED4wAauHcBdAPoycX6/Zf8Znoly/7YpcAYprBIxyREzqvI3\nWreuhWOhuvykwgVLQ9dy+vRIEZRqtDASBvhCHDYjJeHm1+eY9EuiAmyjpTGt\nyEP4917LMeOTUraTjdTzgMxJBtUOIILbw67xro+o18nJiMc9BPTUtVYa0I8T\nK4ffbqiRzw5av0LiW4qYSKEE4g+wKfgNAozHLuhYO9ORXqS4PWlRf9791KVv\nlSANyvkM+CPpj9vTWxVmohAg/7/PyRkZC/CHA5XW3fhK380tdoLYjiWLEOrP\nHTpJLZGQlKZOxHuyReZciaIkI7z5pBydIKKPKarYZS97Bsqld3cZnpAK2Z7d\ngPDTiQNxL/TTTJ+TH/RM2WwCp/Ff3uPVkYw+wvJsB+Uw7UEch+kgpnYED6SY\nIc0DEu+8LDgr7tCgWWQdDhbU5kFbu9o0o0UlFIOTspjmkVGK7JX1SVCBz/G2\nQaqn\r\n=hIC9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha014_1555289796969_0.3621727425893746","host":"s3://npm-registry-packages"}},"6.17.0":{"name":"@uifabric/merge-styles","version":"6.17.0","license":"MIT","_id":"@uifabric/merge-styles@6.17.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"5133b8108662824fbd5b39497991c149038396f6","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.17.0.tgz","fileCount":197,"integrity":"sha512-yTIjOhskNzhstiqpMhM/HI5yUBCNbWOF/8+WDfGLIe4rusxxjVyC6lpBV+B2Iw20ridDFdIhs/YjKy19/ifTgQ==","signatures":[{"sig":"MEYCIQCUftIlstVqAw7fSb/9e2tPhAh4Cjwg7laWjaoIm0YavQIhANIN5uXK3YWYGJ9Y90tJ6Ti7V4MGiTCRdzbTZLvRpD75","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1655427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctHo/CRA9TVsSAnZWagAAPy0P+gMOCG6dXoSlT5k3iN3l\ncdZZlQ4DjoClw3TDVQXqUJyF/S6gHFSRwY82k1zfIvn8FbQ6KESp8PwWhHqT\nfnT7oWe8WiCVHGDDH0JNMiMRoXSiFOT6fMETfnVS5Cgj2YzusU5YFe4D2mN7\nr3p80kmOhvIk7PjD/fs4kJi2xnM5l1TiNhA+a5ZAzfwY0HAmr6f1/IJezOYZ\n64/qP5HhqgGy8w+EO78HW4msYjRUPWDUC9CgaXb0yMoVsx9cngeLnwVmTVJA\nkLRWCY8TC9wyUb09Yi/vzs7uyt92RvFJ8GgkGjp+ypE5RI8baevXVz+xcIW7\nuWv3eXzC3yQB8g2U/oeojoJhg0Khbg9wND16Yrwd9C1xMSoFgQSQNvHRZ5bU\nR587cPC7t+HdAP8sN5FU3TS9tgqlSgKDPp/HL7SSETeCvAvX97S5gRPQNIv8\nnOWv9HerWcSaruUa9zdUoSZFiYPeqlZvRcvOIh1TWjbNfdR5CxvBWGMTtfJ6\nkEe6slPGQ8J+XGpg7DsXHQ5e7KEyf8hRIjnApVrDiaYFxF/svUhNh0hAQ0Sx\nL7omiDam9kZVTnj6oOkCPJ001+oZH3+GjUNYFUnvVkF44L5LfklPoZ7LJAvK\n5eINjD4SJXqy7+gcj6r1A6/YsBkJVZhFdzGvMMJmrfqdnBXMnmR/lAewH3TE\nKN3D\r\n=GoYW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.1","@uifabric/prettier-rules":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.17.0_1555331646711_0.6555318086749304","host":"s3://npm-registry-packages"}},"7.0.0-alpha015":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha015","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha015","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ff0cae51c7bbf14f9bfa3559e4249f07b69cb268","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha015.tgz","fileCount":197,"integrity":"sha512-8clSVQJJFwdIAFbmdBJus/T3dWmpgCmvvV0EqHqcxtqXREAKQQsKJgelt/KAEQwQpemso3D7XteWTF2OXtKOmw==","signatures":[{"sig":"MEQCIBx9OblrJ88uRsLEMW4CqPoHaLzPiextDoDWaJCYFpIZAiB5OQQAM+HvH7i9iboEfZXqIFXclttdhxeg1eDD0quVwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1652582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctQAlCRA9TVsSAnZWagAAtAgP/RrmqOb7+UeXdwuo5ke4\nds2W2vHyWbCCvgc0LxB9QIhhPJ4J/nYMcjLREDrUZ6RLpZdOnKIouHyCXBZQ\nuUjQz37s7v3h7Lfx27HteMYtJcmh+DeMNe4yRbs7Q3uecdebKrumdmVkQ8K/\nr/mdx+FMymUgwFQaLCYYzyvcgHAtX4YlA2k9ury0UVC/LfHInqvP2RVzl2CM\nwdPcm3zoZdgej7ZbngTQDM5QiHOnAX26k7w8ocwr4WcZuAQSgrlv9byVZueH\nwaVYdramE6/tErxD0BQ00Bioo39Jp0Dpw6/ikb8ERhN/9V9XCaeRw0M+cKhZ\nt0i5mK/fzTnUfjf29EAuZsuS+gTHNaUfBI+DQwHzAKSaJZaPNsq4HjfSNh6i\na5qQDbAhiKaBftLQSdGDNabtwhENyeSzs183z8chC72c5qlzgw0ak+pcHm/8\n0oKSBYs4L7u9JuXght4IL0k+YrDl1rZspq4AGuPqZmDachpdb46AwqFVnNo5\nBdufTQabVBm92u2KL376h4CVqTJMD6dNU/ORmtjrHpMH2wJiSBbG5ITAUZor\nqtwQ8ZlOoCpERNJxt2YvnUFi+fXff9qUrS8E5VQB87xG4rhZlmgNjiaekFL4\nIQ5jFB7nynsEVIO2aiiY4aBXuJlSsD0Xys/B9T6PJvIG1mg+lAozU8sXhpI1\nzCB8\r\n=sczF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha015_1555365925089_0.10730794746965389","host":"s3://npm-registry-packages"}},"7.0.0-alpha016":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha016","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha016","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"ef547dc0d9621751702cba0ce6bdba00ffbde74c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha016.tgz","fileCount":197,"integrity":"sha512-Kugb50rG+5JkdTPH9P2+5bJedmEnoh3W+UhcAMY8A66bs1DQSq66iIpcY84aWP4NHGXirJITvVz1zYUOCDBgHg==","signatures":[{"sig":"MEQCIF22sXCbLIGJHF3zTYT1qpT/u6gCdfN9bSNREq4Xa+h2AiB7oL5hrorEzFSfZgvETJJaiecfrhzlzVegNqbG/Icqjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1652629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctwISCRA9TVsSAnZWagAAM5QP+wTUM0yA99YJuNqx23Dw\naMczb7du2cV27WRKb/OcJQ8Qf5yIbefInspb/bTryLW0KSOnVv9HG2HAN56I\n8gYfWcaCZ5EbAYG4PieaSbpVXS9Gq7lgYVHucsvabQD70eoxUzfHTHufgeya\naWIpYSO314yfHfcLhRjTs4hXXCxlynFMnEyynGsL+FUwt0ldTLC8zy7Bbulb\n8Y9jZGYsV6RfNfafXs7RmavQS/jv4DW10ceWFPuHvUxisiTFRzbcG3vcoh3O\nn0xEx4zdazSTxswGTWgrKZ7/j+7K/6eitm/ayUEvF8xSwmigJWnYPR5H6w7b\nQ9WBoFKeOqLtWyWFKuE905kmZcBh7xZ7t4bIAi8cj/WEwARV8NXda6DVp6mg\naxjTXIZFBS0W7MkWWsvRRCt9sY+RD9fHBHqKDTRKBR3jX1dshz+k0ekAujpV\n/wrncnOZj2dNmmO+C8hpVSilgZYjUYlr25MU4GgsdUo9jpuaxtqU8qASyJs8\n1U3KiRqoQuSJCIAwG6MJmpxRRdS0Rr4en+qXaDYscPbFyf9nNYcVzH629RxJ\nBPU88E6YQSotmUATsX4gFhWAN1Y1TntUgf0aME/RhURic4T+UiyVosWUjGkW\nzu6CMzdC0Np47t7NlcPi7lqwgK+usco+pUxBh9TaWupIBvPKoLaD+kzF0O0z\nKsTy\r\n=D5EG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.8.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha016_1555497489408_0.20336863541864836","host":"s3://npm-registry-packages"}},"7.0.0-alpha017":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha017","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha017","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b03cce491847af645f27e9dc040c31b564e5c501","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha017.tgz","fileCount":197,"integrity":"sha512-OryZ7QSZfcn7ikcrZVezVp0U59rlNvbfeMzX9OfxuR+kRrEBUfAKsWC47QvwLj1QO5jR9lOz2rk7h5iUBta3+A==","signatures":[{"sig":"MEUCIQC7tUrGP8vq+M2R1QQPD54JukD/auNHtG+0Vq6A5aJ8UAIgWwsZps1H6B+XiHfYIFAIC4+XhJxOtgp2Dl36pL8uYsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1652512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvfU8CRA9TVsSAnZWagAA6rsP/0sW2UxFvjO5LTvB+3rD\nDE+qvkYEzQ/WzVjfNZVEc49Zhl/isL2XJsaUxdvWkUW/56FNiXBDeZkpTOBn\nXaKj0aSU9oq9fC4NQwlXSx5kAu3J6p5vtTWIJR72FgeawTUcNamcF9O+cw5K\nXYfxS5NV/gQDSzcY3DdcG+fTn9Kt931md8EIs5INRXF48tm24a2jQa5TPPSX\nR5EDx5zn4jnDAgbagCFJj1izzOFG330FGzEG3REAEqz2ZWvV0ZUrcGEtfp+4\n9wesyQKoa1N29GBnfTI8tLGi6reliDia/n1Z5OK0zSVZ/CEpo2YOgeU7Wjfb\n9wcgSXP7WCoz5wQpW3e62apK1MZ1daCihvsBBJLrzRHpk5/a6a84Tv/Cn1pD\nMrT0Ud0+EAJVXxzjTAN0Is9rpSMRrRUbpgk99Kc83NqUgMuFI9xzJb9Y4YFS\nqqG80HqXDItCChqsF9Mx3SPmhau4Qs79RrqbvnCIapJN+ucWpeXop1GgbHd1\nrExdO3M3ctVSx48cgLSi/sq2lCuzLmiiVKtqIMABpYNQyxwF/yzfJoMQVqen\nx32SWdbpJ8ulWUzgYEt50UxZps10ivsQyngCCXGut5QaVinOeI0qrYxxlcQv\nNqoEJjbwfhec5woL6rPlMzvs3J9uRk7zy8R7zruvOxKGU1vUqqpOtyJv1oZe\nfqVB\r\n=Solh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha017_1555952956142_0.8584113069587003","host":"s3://npm-registry-packages"}},"7.0.0-alpha018":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha018","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha018","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e30118a75d7fa458e285399fbd9162bc1ee21c7d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha018.tgz","fileCount":197,"integrity":"sha512-Egf4CqfIDXQjvnatmwlgP+lsLyt/edlG6ATjjcp/JwMdW4275odtYJzQYJ1YH0ceAUNOzwE8VP07pLmEFffcYA==","signatures":[{"sig":"MEYCIQCATHNW0+z4U81QQ9kHG+XoH4QIXvJHkzGdDlCwQaMi3wIhANZlaStM9M8Gl8+prc52MR2dyXlTBS5BmuAIRXmlQ1tc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1652550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwDyXCRA9TVsSAnZWagAA8ZUP/2YJLi2VqmC7wT7V74s+\nENdkeCfLM6m2uXPffDfw9xSBuIKQ6WO8FTardo7kXZsraXSwv1mAjKjw1Mzv\nAfAXeBYXlUqzz+1JFx6CxuYVPSBVBnjeN69eaP8ARdplOsgvHBW0dDFBkExr\nFQMYB1Dj6Lbiu08b90qiH0kEV8FHv9qNg6nrdqsHFTfKnrR0Zl0kF0/zfI/O\nTj3IIIcWj+HsnI00ZmxXIYnQXAr94GnpYok9vpCSY07Q90cG5z/BQCw/AO7d\nJyJABql5N23Z1lVGEldpDwJv3I/o9PaOS6XIhM6NxnE4SdIvf19y81R6YBxE\nCp5iDgy6Wn5j8920vSDiZ4P3GnvDm1kR4TuB9DhS2h2CFhi+/VtcaJMJG2v6\nskyqjju8F4D11rvnRWLdbXLy/70ivQgmL4glRTqT8dW2jCSJMP+4fVhda400\nHEHubKsICKObkrIeKPFa0GpNutIUFfdOHh6fGI1jcWwIoITac9nEoe9LN8Ot\nutmgqn8WHuAvjgb0qobula6dhfJ0NuDGqsiM0M0SeFOltIgUf1QLNM6fIoiq\n42Av9Of0Tb/wnsmw4PeBuS+2lJtUJGRwgO3n2Wf2jmtZ8ud0IroDnm9EEb3A\nIC7sPmL9UeI5X2YlhgnSAk0b4Brrw1cN2D3MIFTPKCRS1xvvsXs9wJxXFttY\nqnty\r\n=QXk2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha018_1556102294941_0.9946915784340444","host":"s3://npm-registry-packages"}},"7.0.0-alpha019":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha019","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha019","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f78c13cea4100768828d0c246906755f59f2e9f3","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha019.tgz","fileCount":197,"integrity":"sha512-ULeuZTGP7rCbgh83T4o0hxx3KOtREb+zHzoVeG51ycxI37qG/74rnoXEeg7PGwlYyayVbkr6pgat1QcRDwV7bw==","signatures":[{"sig":"MEQCIHjLSDzr/4l/6liR5/YOHsv7byWplDS2pHBhsg9VD1lwAiBcaiosoi/bz29sgDvq+DEoo7kj9IDtb7cR3wy0+dUZ9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1656963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyCSGCRA9TVsSAnZWagAAmeEQAIqVygQaq9gNYmGZhkzp\neV9yHD/TYUifEm/45rKZvJeVaj/WHkFhzINbOxDUp612OkPGSQ5e0l0OwtN6\nwR0ZS4w84K9KyoAwsCHfG+toKjTJuFCCF5JvVQCA/8BDjcb1hvHGuvK9Wz7C\nWZZV6k2Lyf8Nt9YFHr+qIBV7Nxg7dIHoseQ3grsMh7exPBFSQB8NWT2nDtUh\nPU+HGY1eMs4dJNOVlYkGB8cqFqFZOyFe8KfljwDXzj0x+wGlvEmwfv7EzXAn\nOAMABmo0I1a7zi/tWp4K11V1kVCfmpKTmVWhBSzNylEwor/whv9pcJd55efs\nCt8giRAM4xATM0PU2/vF67Fof9MygUgB9RGDM0P6lm6/60SagvuDGrxUxiGt\nGLGenAw/jYnuP8DgYNmBB8xKl+y9VdxyZbQ9lbTzv7oniRvmLdnrrVJb9ARQ\nR/HDR0M5c7eDfJ6HoHNIorg/pmKyuyfLNguAKRfIlDbIjU74CYJRRANHx4nq\nGranohqHx52ZVtvgtY6MkqP+VGMN4zF/xLO83L/TPbpxBvglTpmOVe2DorfY\nmQ78Tl4/tEwGQfnbIIn2z5bhT1xdfdRy4B5x8jYyMpBhx5x3MdBxu/+7i7aY\nF9+wbJn6xsh6n6tZRaHZO4qsCfUHCll7PTx5DW481dd+qA2MAGWebdErXXoB\ndo+W\r\n=HpFw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSet } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSet({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSet(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [\r\n    classNames.root,\r\n    { background: 'lightgreen' }\r\n  ],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSet({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSet({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha019_1556620421727_0.45443398430528004","host":"s3://npm-registry-packages"}},"6.17.1":{"name":"@uifabric/merge-styles","version":"6.17.1","license":"MIT","_id":"@uifabric/merge-styles@6.17.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0b28bb356f262dc7cceb7df37ea05bbe3280f3b6","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.17.1.tgz","fileCount":197,"integrity":"sha512-3stMnzsOTjqmEqka2V1MnfxlhDuyVyqQ8c9CCNReHCywau5pdtmFX+8l7jNhnP5/fK954WgrKKnAp/0WlusCBg==","signatures":[{"sig":"MEQCID+E28PCrO9DDVBhTKiS4mNLXH2tEgMIqzfCD0NSvrAFAiBtE4/sQR738tfuUqalEYkEIkQX9+wyJb8DI2qPyyrJ1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1656139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyuR6CRA9TVsSAnZWagAAfOYP/jdSqPSC0V5Zx4CI322s\nrKEFgtWurtSKynIZr657lrUWUB4OJFGzRkcWap9+Vikafg1TeYS8klpzGhz0\nCHQxu9h9j6qFfk8xCKEOT5x0Ycb2CadVoaK2XdBHl9mVoqmGYNuOOWJfRvXJ\nhFXXIuG8BTeHJrhSu2ylIIF3Py1uh6ljV2+9ZLSEjddZygNwShfA0ZpxgQ9o\nY855RrOnzuWRidjrwiRMue72lwnHMJ6ObbrGxTVcVghTlFUw04K2DLPfIRef\nO0JHJnexi7QHOc0teyOMPfqeE507eXAfEkWj65KJnuRjMfTy8FF3Ackv3fsl\nWuSp5hpFWLundqwvistOf+gNKDoUPjbVa12ihFcY74EFWyBDyb43/tTfhU+2\nF7+q4Cap0w6l8R1edYPAXCYn+uiEwvfJ0qE3p4+bwUY8Z6h7NPJikGc0HpeZ\nvkx6ffWwLsk07U8IeAllOGRMaRAKeYKYP2XonzHfmW33/yt/WGD4HGT9qRQi\nizksw2+27t1poTnhlgYRbPCrUEmJKbjEk4YIG/NrZZCoCvAheKutIoTU0AbP\nuMxO14ipRss8DGgmG74raz7wp0Vl4ejAxxFwCbkd7lvmmWeKMCAJ/XjqGG2i\nhbiwrCOOF+0gnI2p9FwCVjOQIUuxg8aC9CKXHKPMwDreLw4P4fSUyaf6gM09\nbLkf\r\n=oAW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.1","@uifabric/prettier-rules":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.17.1_1556800633389_0.7627442044103165","host":"s3://npm-registry-packages"}},"6.17.2":{"name":"@uifabric/merge-styles","version":"6.17.2","license":"MIT","_id":"@uifabric/merge-styles@6.17.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d6228c9d8cf4d3f55e076bc1dde88b4909bd76a9","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.17.2.tgz","fileCount":197,"integrity":"sha512-DdEx+4KNQeOPp9vE7KgN5rCsaeDb1+cahHKqZt9kYW04TzplK5PJVhiNk6pwG6MrbTgQFPQ5dVuNVs/a5r6aVQ==","signatures":[{"sig":"MEQCIHQO12evwz6Hkfqyspf/Ty1BUeJRntT8VR6aYDiF5VSiAiAkeniCupqS+T6NtsDkuTA5Z8d16bltLuPLVrbQO3bzUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1656845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0s2rCRA9TVsSAnZWagAAv7sP/0vyTnj+U4Snl9MqIMHV\ngb9BbmiQnQss4wVcf+Lt9jpP3LO76jdmlK4t1bb3X7JPBJulwRXJO7FJm4IN\nfIEO//qNPPjO8yaQICnzZ0uC6ZReJCURAHAfUAnF5op8F1hIlQjseBhEtx6Z\n0o/Dl+IFx8NmTuwNvNLIf0hJnU6EwMqy2ESlR3X/onnFNGcTbsXGOsH6KXws\n5GGh4PIosqKHPPsSpy9lKDVRr9WOv4Dy8/O1+w04a2xzBgM1F7tdFbMS9vPl\nduPP87mOcEWlObIXN7mPnnKuD4/sjTUOir/ZO19y1GsRvMOi81R2ptuDWnX0\neCIsbvU7P5TjqlEI7qpfMlUmQhwYtij9idOe3FAe+6QofH/a23b9gAr8u0zb\nLSQmKocZZH8hweDL83ex8dRXqtatNa++v1+Md6AocDYf+o1i0Dxe56WG5gty\n/Ex/YJbabmW5H3O+DFQtwbUAnDXWR5bICS+ck0CvV1cYJ4dwV2PvdoXjziZS\na4vacze/LI9TiVaefYX0daXjkVofDu/Lb3LQ9Xahafms/skbFMVyKCGgFFd+\nwoBPPMZPtLG1+4xjrYmVDNIAwfMCB1dHSIhDD882eQoeN0FM27vpaRfp8QrA\nGKJRWIU1xabSW4HLCWROtducfD/3rGVLyPQ7rkoM0ouPNfEPfeJjzCQcFy0E\newKL\r\n=78P9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.1","@uifabric/prettier-rules":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.17.2_1557319083038_0.9760481903520744","host":"s3://npm-registry-packages"}},"6.17.3":{"name":"@uifabric/merge-styles","version":"6.17.3","license":"MIT","_id":"@uifabric/merge-styles@6.17.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"00a3a428e2ba4072e0c7c947b508086269b6738b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.17.3.tgz","fileCount":197,"integrity":"sha512-IXl0NCl3TdHOr72eo3i8A1jzKC3+IboH8Csal99JjJLRtG5vTrEjltXzrDlsCUxketSJ2NOI+MseIm673wKFsg==","signatures":[{"sig":"MEUCIDZjoZ/GgZmNdPBHeZSM8/Bndyu/M6ewwQyH7+S83P26AiEAtaXftAcgHjuRNVKYzRGSfEzE1zzkO0RyZPWJdMVT7+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1657972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2nPgCRA9TVsSAnZWagAAa3EP/3IRioFFqC8VWIwVRsqw\nMDAegG3fS98CVIwNqKy1n5o/3uMYzjRaPpX53vVScmDHTXyFbNODbntswaxm\n1/WsNMNBhfsLV+zUVV74OMzOXE+oQREDAHvUR3TDk76UAJObwU+x9yrPil18\n9WfCNH4e0cEGbIkOun8r4YYjQB7h6mKdS1rnVkNdoqv4Jmoo//49PvF5ly+v\n0CvQC9qRMP3LFoFmD6ouvuLbrwbPkYXdbeVFgVKwnu/cUCr1fxkeDq87yl7y\nxYx7ion4YBccp+TZyL78OeC3XzCjqJQ9npHYTbxnCo8+a0e/uMAeTdx7GkKs\nXhAxCak+h4upcWYd7Nl0mt8bkdwrb21k5kBaEOx+UNWB9GMWGefK0LjOWrta\nLtIHxKjqxk9SyjiJ871tEbHbWR67WCF0hlYUN6PRsj0c7zKsAgGoKsTzCrST\n8smYrGYPUTW2tnpiJ0ZjVPj/RYT45f5mWhJmdK2zSkRa5rk5TjHLD2SqYWrh\nGuRqQyl7PgZfeFgcWbaL60YTd+2LmkB5dGtneG/OF0Wz/zApQZLDsyex5yO7\ne6LRqmIgcCIhLf9NYju8tyRAWopI2SIehmx9wBUOTc1W2RTJcf6Pv3Klmduq\nuTeyRozvX83/SYZRW4uDTtuIyrgfsW2+TF/jBnDAHlLi2/vUqEbs18nU1gQX\nKyEf\r\n=oQFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"8.10.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.17.3_1557820383273_0.6957047775136695","host":"s3://npm-registry-packages"}},"7.0.0-alpha021":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha021","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha021","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f9566db1dfd4b1c2015c6922e9908d8735d0240e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha021.tgz","fileCount":197,"integrity":"sha512-nRLgEptWY6/42rUscZL+ZXb7sikrctIMeoDXAyjTc+nMs0XTFiQN/LnoMzs7kJIxWJFG7ZlSLi76ktuEwnVIEQ==","signatures":[{"sig":"MEUCIBhs6ck0TzYVLeRkdHtWmy8+q5h5soPGH/X5eiiOtW7gAiEA8DWiETtZpp0Ft2hI5uCnNdCTNoDdlcxmBmmk/lIG+xs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1659648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2+zmCRA9TVsSAnZWagAAYqAP/jKClxjogxADEt6NWjGR\n/BucuVNUKts3dMwkqAihjVsMyUZAZuJRKEE7oO+rg+u8L1iqi74h3XZV7aBQ\nZ9hE0y1fJtfusE1aJNVfuD+ntOoRxUTNMJbSS+Sgjbre402jKBW05odZ4IFw\nlqZjcyimPv8MeCR05lPPKySmhXaJN7fP9YkhqbFTow6b/SsqXkfdtqVnhwi/\nRX1Y5/dX9FH/wl8kjIlmn7shvqWiEIHHC5W9qG3KKEPW2y6QxzobTKIzM5H8\ncJlvuwKpXsVbebFHC71ayJt7+GRBPHUF76F/cImg46rUsRwxB364LbV0i/Kf\nA0uu96uGosknPSk10xpf34c7lFT3V4vQgIt6B78CRhNGCV5TaNN1Hx7uCT/s\nldHSFGIBO1PAN39FoZEetF5ZdqwnfXfID/ob2zxrprwyDOL0B19BXQZtojbV\nDbKB+pqD7HTaCeQFsIDGPrw5bQdNWk+Kz4onOW4dVIouTjCfJ/8Z7D52Er6n\npzSfSguzIet7T+i9xDIGI4EhG87IujMFMVBv8O9ZFCgBHCHXz+llvAQQ9fg1\nMJp9dczQyEPRKoFClr3Tjt0i+UdhMrhnZEVKcED94zC0bky+PWz6RUEsEOJm\nYF5UNwwFi8Vi4I+kXMlUYs++w3TZq7NNGI+npbsREF7TMXGVPkFG2N9BTCb+\nV1ve\r\n=oBbH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha021_1557916901167_0.7208706946175776","host":"s3://npm-registry-packages"}},"7.0.0-alpha022":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha022","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha022","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"c4e5fcca111c675c911f875bfe309f2bbfdcb175","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha022.tgz","fileCount":197,"integrity":"sha512-e1SNAPJTaeKkZIEXw+WKgWP0ghEnth5IOiLzc3IOSlPIT2x54cUOkxcBMjYmbZ/QdUBC5SU3RcCfOhHETsGBTQ==","signatures":[{"sig":"MEUCIQC9Wg9zXawkbelJlVclTEn4REmPGRXZ3PhN5QojRq8eiwIgNYtHRuA0KjyPtHumYipomp6teRa/8vtImfsv2awcuTg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1660485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3o7UCRA9TVsSAnZWagAAmhkP/3IU1pmr3l8nDIYjsD7E\nCtoNOH6fy4n2nNQd2EK4GhD9LVh9/egpxEgWz4ZSl+YRvjHNaWr4qd6WNM5m\nR7u+JZ69JvUTircH5EKVgUxax26s8fUrt/JTEVPv9h+HpfS7XGtBQ14eA5xU\nmMEbi7LYR2fkuLxBlWIz5PFIQAGFQwCl4XtQiq3QfmLbP8S4yPD7lcHjrp/h\nrygv52Ipay/8XVXhMrnbH2ZWvbt/uBSJWfgHZ7V2CKkf7boKNCRkjLpgpf3w\nJvSSmA2CrEQveNhfeIA0j9LgnZbM6yrWaknw9IIWtSXlbrUgYr7W+qKiMjcw\nbF10v0hE4iQiKmlSyJvXbu0MaNmJLExjBKdVqHWN29pfc45wYBxQNToPj+4i\noDuf+3zzgIDLPAql/otbJcqMJdFjvy4ZZXx4gpkuBluw6AjayZ5SIjnEN67n\nYiOzyCB4a3nZh7K/orwoULAhVz+pRPDLix8SEQRNGOr7yr2Ncr/eZKxFvl1t\nZ5hFLQwHa57DzY/E+QcYyzi6rF+38I6d3mxQ0hxpq9UahemPCXn515X5c0xE\njBDz7kytmo5NkVRw9K3pP3qH7VWkIu/UAwleGyXphlObJve5cyM0l+FoUMaZ\ng5WuTiUdbYxt9Pn29SySeKwkI6qVdvv5mNhlJfq0siyp1QpE9rbfgrOQl21T\n0yOs\r\n=fY/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha022_1558089428038_0.6287994124680643","host":"s3://npm-registry-packages"}},"7.0.0-alpha023":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha023","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha023","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"480380b83b2f2808e6737e668489ce29ca87dba3","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha023.tgz","fileCount":197,"integrity":"sha512-fLU+QJtCKQ2sHSjCIVINxoR7o9RR8c8+FqWSyTd6N18UC64pDdYAE3DG5n3t/GcMvmZS6O7varvV1dBVgzReQw==","signatures":[{"sig":"MEUCIGG4KduKo/tmp1pAFfUFVeKnh7woZqed0HstpVpmZv+eAiEA+0XL3ZFi2sxEkmmr/0//T5+fEYVBxBB8nzKRq8Ai0+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1658607,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc49T7CRA9TVsSAnZWagAAq2AP/RZmDDn85fjnKzAPSCAL\nqoa98rFuDJzcKw6S6jgzN56lSyslE6WM6mNBx4ZpdBSMmxdL6ecQ+iLV2ZGn\nJ/NDSnSpSQjfdbuQWLMDfLtqBS/k/z2X3G7bnmSnBxb5qvjSRj8pfoiYrmeB\nxPAMj+8nMEArzoGI5jjz7+GNSAg77mfV+2EKb1Oju6Bf2yFydS7cPEs1/pER\nGbClIqOBjacXHfgeJVL+Dv7E6zxk6qqPSRWpQ+D9MTCM/fIxty0dRGvs7p5B\nSBhkArPwfsx4rhQ1qlvHHeEcCfbFrIYjz0mUZHxh8ZtnO5d15ALCbdSRAV8J\nNayMCAZA0NNnz+bd3QlSN1vKYtpNRZ+FdcfFb1So8dpc+f9/X58a4US5lcJV\nFtTsRPx355ZDMwp6poX3+bnJuAyU3zXzGQSAq3cirWDuCgOlJHJzfMYVS9VJ\nvl4EqbplZHVwbEqQ2yrlhmR3SGiNE+Cf9oA7QHFyaE1bUxK2oHvC8utWzo3j\nqygxY7OT/eNs1xE43YqR7Mgoi+zMwFaKxY/xBC4Er37zb4UuTWsiHVM7vOMX\nzYERHVP2EJ7/AA8BBvtdRFYCrSpIaRND+uyixefdqtryETqEeHwxPq7w13Nb\nslPTXW7PMd7VWytE4+KJg1IP4/ajxLlCo+tdOQRzl1jXpGhh9Tb+KdMO791z\nlrql\r\n=VRe1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha023_1558435066719_0.2793132597264232","host":"s3://npm-registry-packages"}},"6.17.4":{"name":"@uifabric/merge-styles","version":"6.17.4","license":"MIT","_id":"@uifabric/merge-styles@6.17.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"cf3a59a73c0c050690733083184982b9972941eb","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.17.4.tgz","fileCount":197,"integrity":"sha512-IYg+LiyetyqSadHTHYYUfpYKWdlKIF5LTmumMX2Mp0HtgAc51KOf2xx2XX6M35jERIGyBSvQruOXjvJXVGsXSg==","signatures":[{"sig":"MEUCIE70nlJoKGmRQ0Pc2TwJqb8LLUeqVu9s0e4feL8YqIhPAiEA9IHqvMDd4G8ireMfIbdPeoz3jrCySEwGrDP2fHTvqMk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1625637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4+0tCRA9TVsSAnZWagAAIWgP+gKhpoH7UBjaiLJCiGs3\nJNnY2bxait+WKPx/Zrzq1o8WfkTvE2HkFvc1K3/IybTDnQe8R4IdowIjApd9\n9ycL2z9nq7y/ZsPi22+gdMfd05HYBB8sILlfNbmrh6/PP3cIEqNg4RpYbK2A\na2F/ncKqxayqMMcKR7v/NMtNz19IKMo0/5pCEd6hFSad4uhBKtSLrPsuvU2j\nMVokcdnORROkMsn7PBMgWtq5f9xrOjO/IWQmCNq/S9zzmFdFNyb+D9akKW43\n70mKufFf0nejiT0s/87C6lxVfqLhX8WKDPNBReOa/qW+rPpAGQwOnKuR1Pk8\nM8lTJLp56H0B8JEQKQh11TOwMt6LZRCUuNf4+mvBsLGWzNFBKX18+qEVvQvf\n/7m/dnTYbP2FuCBUHmjqOVfLRQyt8TJ/Ndca3I+3zXLMuNbZW3hHSi89V6pg\nujygpWM8ommPruCdPv7D53kGElJC/23hEVDRVamTwDPXSxWDueyKpK6D+hhh\nf4DbV4O4XbEXaGRD98rWLw+Jv5YoBaLCUpQFZ96xFW5Zr703YAdbi5bD1fil\nE/o6bHrzP4v1R34ovF58piO8L+F4w6L02+PmCmoRtKPpegntjVpuQS6lLZBU\n02uO/AZaJDyYQtTpl4wDENCWgxcYrVRh89SBJaG/pF++9QPM5y87l+euymTw\nuW2s\r\n=+8dc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"node ../../scripts/just.js","build":"node ../../scripts/just.js build","clean":"node ../../scripts/just.js clean","code-style":"node ../../scripts/just.js code-style","start-test":"node ../../scripts/just.js jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.4.1","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"disabledTasks":["copy","sass"],"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.17.4_1558441260397_0.35483193288573567","host":"s3://npm-registry-packages"}},"7.0.0-alpha025":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha025","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha025","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"1c6aa4132cb9b9b36e7e78d8c370a7a55dc29936","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha025.tgz","fileCount":197,"integrity":"sha512-maEVkzO40LR4xAXPnAlKTFR8AS5b20dMv42ndr/dU+Qih5r5KpTxm4m2BQOm6sDiaEY6gvQSD+VIZT+1IBXwOA==","signatures":[{"sig":"MEQCIG9BPwKbIX0qeJfwhaiC4E6BcYCjBCvaCYi+Wn42PaSHAiANn3u/OeSj36xvuc35PPmAccKnJz2pnm2lQI0RWAUn1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1661066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8G4oCRA9TVsSAnZWagAAV5UP/1PseYcL4oJh8vBb3zzs\nFUbg6Kos+gj9v52tSgD9CVOtfV5JBPIk8rkhDoFGoU6IJ2xpdbrhbUdBR4Fl\niVV7grPk8iiUfiRGIzl9ewfb3Q8XVBz3lesJCHBVFIHjwaiadGhozxpDbvo/\nh/WOH22PviWcZ8N7C7gGcp0Xk/z//mrQxvCUrr9ts6HsrB++Cl5dUH4u0pTD\ndEI/7eX/CXPNK8J/4qItjgqtlE6ShaiNQVYNVjreMuPfHqq02un+ztU9uiLA\nm7Yosd6ODYuQBYtEvJYLq7AgiUMOCL80PSMuy52zcb6w6COK6mDhke6syBmt\nbysvBHd4x+AiD4981GdmOi9790DcqwULU2bzK4/1xP375h8GejaoQEYZpoXq\nlguyoqUytg4wRvzw4SbMDDBwpghalU/lQBLK6DC0t3z3/ivizb9UAXsqrbni\nKYVjGvdxaZYoKyghJSAFaQchUWzSe762Bq43L7WjPa30HKZXIiiQJGjT1V7V\na3Ate1Lx+yTN1O6+b9eKjZ5O28YCOsczcmmn8oiE6BoCbreFKiV9ZLKhKARm\nmULoy/bn8p15zadfc6VPYMP8p34LS0tIJjSoG1NsGslBh7C2982lEHvZB0wU\nsZ+tbcZndMR8OynQSei3APJjVi7C35Za/Siw5noUYDHhn6fZQc9Yofb0funq\nCXi5\r\n=r2eQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha025_1559260711965_0.5268592529052689","host":"s3://npm-registry-packages"}},"7.0.0-alpha030":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha030","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha030","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0a07ddcf34056e424dd42b04207b3911b87e4196","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha030.tgz","fileCount":197,"integrity":"sha512-SM4hFTl89qH+VY2KldbG/WBwZoFAhQdC1cJ51TeqHDLGKOJJgyD1u7GqR8IU+SwhuBl3u9l0KHspSsqUINrUkA==","signatures":[{"sig":"MEUCIDNMQYFmCEWrDjosgfCupxWJEE0VwPwgwEYN6I22Up8wAiEAmsxmYixsupYe1ATuvQQ0zqtx0PnQ4FwR9qlGrgoMwkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1661064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9PkACRA9TVsSAnZWagAAC2wP/jCY3ndmKdkMJqD5z6Ko\nS5tjYyFAhhaaNrp4YQV0kJk050cNNusPIUu4fYfVSJ0pt5pqiTlbyjY8FS6w\nf/rA4LJsYQNTx4kfTrLveRS+ryVZ4Tjv8yzxTgWgqhfD8LwMfU4cVMy0/SYA\nUwaCPPjyqb4IZrXRhcgaei6QOyhFJYklOEx/hvEyfg2OmDR79jU2tKakVLpr\nmZwhv5nibZ4MkWYj/SPBDK7V5p9r2YocUT/jCWJZqscxKHoqIiYKwTjbf3UH\nAMu/El9RY3zzED0DySaoUYWh88DKOwK/24M2V9XyIzdP3IP2J4X0z43e4Xmk\nXxnxkH7Fagdc4LsG+Zk5Yl/9E08PWkewOIlNyUg2jwQI3QfTUyQ74ofWROi+\nxWoJsrfsGCiAj/zSxBfwbM2gKnnUERhz1r161UI3J4jySZIo8KpHRLeWiagM\nJNy4WoNKwbGGpIHMYoqvLLh1ZHyk5GTs2Nu8BVRgu1lkOuuw2PSHdbkTCVzV\nEGbkzZ9Xz+Z3wtGlqaGaTO9cHCtvjWvrQq9muSDzKhj6g8roVM62L6z4fIgT\neFzq5BOLX7SLtE8eXn7vcGFdZcbRo/DGjKjSkCs/KH0J8motYGDspIlCUKo9\nx5atr56GIQpz/c2NqR6rFSvU3HbklquoF6PVGpBZmdkagkJs15Mz4ISqWhSt\nyCln\r\n=rKw9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha030_1559558399724_0.7782263979377055","host":"s3://npm-registry-packages"}},"7.0.0-alpha031":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha031","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha031","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"6a430c9d50cbcc3a871f3dfc70028d6be3464297","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha031.tgz","fileCount":197,"integrity":"sha512-M+VC/s+/lqOnWDcC8MqXLx9QYuRPyJ6p82mD1TLoP8oFVO6DXKxREVrU2FC2bQEU7ueQLhpKYfFG0NVz5v/qQA==","signatures":[{"sig":"MEUCIQDqdbh5DCMBckd7EjfrSb0N35H0KnSDrFWEeEUslNYNlQIgLmtEaE4warqWAhTDX1AmTiwH0uoXpouKYQMKUPqjJW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9kqpCRA9TVsSAnZWagAAA5sP+gJmt8FoJGYw/NNFcFYh\ngS/EydQFp6FSrTYkTfxbZXT/D4nAuaPbXaM8X7RgADSdx7TQcgrmiwAyrtDZ\n2qsjgN3tZ8l6Ilc93BzQnTlMIF0u7tEhuXtRRAJFsMoj9i4r+VMmCezGLeg7\nFuuKm6iZKKqLX+PL+blVcwbEp9BcJvMP4EAiDIHOKavYxcUuLJLsNNzmC12d\nustZcTPglkLrXBB9Q4BzAhO87DENkzJD5+ll3MccBaU914/oVIBZVWqqNUC2\n8PYxAC1QPBoXeN7IdY+zrwXVZbCeiBopeggdCCzBucp9mVigIgjvSa+rWj95\n1EiGwH9EDiSc7D6R3vHQ5e7cUX5deF2CX/0XA1Od2sBkvvmrZbfRLpytovty\ngQomExADUIYpkWPp28xcV/dPRnQHkzh6wh4xxviZzyEhW1Ug1OrKKhJ1DUeA\nan1q5R2wTYChSq2VzcOC8ZW6bVfOUDRTE1T8kk2If8jY+f/xNXfmusdKUrle\n40dFIBmjfxEOVe9HiHr2d3hwi7ZwKTtYkcRsO8AoARPjIkdd2OstBtGtsFcY\nIvmjjqPZeeSatyCMNKKKDkQRD8hae7HuxuT5M2pP9EftQMBO9V6Yyb6GeAEw\nJB9D0r2vPZMG9ZGuXC4OxK0+vtOAtOJ1gGyML4ZoxS6kp5zdcLXN6PGPhwwW\nOG7F\r\n=yOmL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"node ../../scripts/update-api.js"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha031_1559644840827_0.7361899433872274","host":"s3://npm-registry-packages"}},"7.0.0-alpha032":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha032","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha032","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"376779bbbb2d27e9499192ca75cb0a2e2425f2eb","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha032.tgz","fileCount":197,"integrity":"sha512-PO72noc1kn9i0l+6v0LKvYj4NqN2bfkvMRNdGodCsZjEd0RCqPFT6QR0bSV9YOelFW/4xz6fXMzLSeeQ+0rGGQ==","signatures":[{"sig":"MEQCIF0axKxyb7sOP+bwT0G+AdG1ffYMuGQHQPoQMU5d4wOFAiB3nyj77BV2RL7Lt5YlmgW/C8Jw+02wnkllbXSzxihINQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9rCICRA9TVsSAnZWagAAKzwP/j8VLUATSJ91TF9d7VKL\nRHsDtq0kIqI+0Y0GheXdDCsj+u1qnHoqqNHPiLwjvBBP4moognZ+j9KRMD37\n6SX1gjdIwY4HnNx7ymkO1vJqd3INItzZF2Iy9NmIJ0jUazlm1oIWlXUmqaS+\nGx/aMeUJQxoMH5I6xdsWRLBdrTNS1DbWvrU91KSNMRbBIBcsIF9P1Iht5nqF\n6BDx/MkD29yJaUSsbd8AuwFDBJ4nKRzyhk52EQkF511Re7b4FCF1RBzEMpSd\nQuC+0AXUNW7BrSv7QWoWPKRYGF+mzBzJ5xrVRW5jeEiX859bOR3Zq+Ykpp3u\nH2Wkn8/fe7XMkJb/bq+AXnliJzAhlYwF+Q7x8pmGJyMmYB/Env/8JLbheaAE\nw4lCwW185MSsVP8RzyHcmzepyNvGA38MfsnXT2gCqQoRpSFg+moOmxXq6lsG\n+NuzrWHEs7FImqghRusjGus9sCJ7/UnCZ0u8zdrdT9j1uOOAqiwhu9VbD0bn\n8TB8AMu9OsvqK1ovcTFVSSVD/J9vBjFqNXXjU4EAXx+rNbdL+WxvZWXdDJay\nx7qzrL5P6s65yUBU60ijgE+VhDS/RWUD9Igrd7lJXzRYivQCahro3n7lWUht\n2WEwR9H+Mn0KZXJZz/HTFcBSrAYp/bPXnnEuMOKWdvrdKfvAUTi2HbCJSs8q\nTCZd\r\n=5XbU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha032_1559670920293_0.5824758604118132","host":"s3://npm-registry-packages"}},"7.0.0-alpha033":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha033","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha033","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"56f40785d0944d19287acf0e5209575542cd4910","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha033.tgz","fileCount":197,"integrity":"sha512-gmHmC9JuHmsmnOyoceJnxHCOXrHznNoBLaXmU23PGyOnMHRALoNc2yvV91epNS0yFdnjZzK0gWuyLYqwKFNUFA==","signatures":[{"sig":"MEYCIQCIIcA3KIWx0pFbVLPO3FzoGRxn935CtZGdnNZst9pvCQIhAL1zO3JbQ79r2OBWVSIdxmC/FUN8TSOOdfxdmeOrQuY7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc95r/CRA9TVsSAnZWagAAzowP/RwE9WX4ZNilDDPqe8cE\nZIPlUBEHg3eyAVvJpQYwn7IRUaeuxiHe0eSWn9cR5p3sgvTPr0R12TyLDDpW\nJVERjRY7GGwWAQ5TVhkHICAGimFCwKOfLlbW1C90ThX6Ra0LGgB8jOWd+sXz\nRwbJMARdZkMOJ/AXzSpfk27yyhw19dQpdHoM1YFbGWfqUdPYJMW08aNzd2mf\n/ElYqMATjb+82c+HSWLkimIQd9U6E67LGFzZqPk3+lSmqmdvK/9Nuht1/P0v\nPX9FrH6vpORdsb95BrKoujadPfqZhT7cywMlH69aLxa1fPs1BZHlVMAJ3BC+\nCsVmo+Ksih2UOUv+Vt28nWWfPfTzcV94kHxee3xwM7R34Yb/TTE2wKn0IuEs\nBHe9wNwp1A+ZmH5+oGTUmmyyR2vTVupolNpGE9Swh4bz+Voqam0NFYU1o5vk\n+N7uYj5qd9A7sHGLxcgIhS2LJFHezRy00J+hJp1d24YNdlXq34QR3n7Jx4+D\nP5kLiAYqhSsE07WhHdnnTfzISrSKp8voBYoXjnj00cRkCOg8W7WpQA0eXg2m\nOLBeLAmMJiWNJOLO6XQUTgLyvfm/NrPgvZ60q8waj71o5V8KsidRYachl4kj\nFcFLX+6pyola5Ua/RD1qcaG6THrTrINJjNcOvf77iSBkStaB/HX+K1NSgvQy\nnCXF\r\n=hTAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha033_1559730942343_0.05916842807049538","host":"s3://npm-registry-packages"}},"6.18.0":{"name":"@uifabric/merge-styles","version":"6.18.0","license":"MIT","_id":"@uifabric/merge-styles@6.18.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"af41d769b34749d1cf98850606c7aa010dde4a26","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.18.0.tgz","fileCount":197,"integrity":"sha512-ja2jyFfDiiDe9/Fa2cqSjZmr4yGcVIuJ6E9fWSNutjn49xs+apkIn2xDSF15zuGwFXKcibrwhdRM1vnLz8NAZg==","signatures":[{"sig":"MEUCIQC3JSO/Jq2vBtOYMwJSG9J9wOFglWIY3eZBmTz8/zz9rwIgZksGXg5whAwx64fUvJ+vDK+sRv8ng8U4maPiyovlz1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1627335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc97QTCRA9TVsSAnZWagAARhsP/0qStanj9QTsouEevF1B\n/ROcTA9HhUFH/XPVxL0XwEoVYsJJ19tUE/VvM3iVGmxPzeDkpGDaS+B7TJ6o\nm/67zZ6SciI7Sc6+eUWm4jhFxToyOuDoYMn86xBMxScCiwNxosh/khNVNO7i\nhLvxviGjeQryquoseBXckdjTyClaBQZm5vbDeFc5eQTchKtiT2NlsCaFzNOq\nh3ujldyJdotiMVQS0ETWSJ/pUhRmV9PgXuuFNoxB56qecDprR+dD3jj1gwqx\nEpRIXrxRd3HxlFytHX2BLGBFdaH+RZc5k6q7N79bPEAVTbN/JMQrGXs03yed\nCWgWnyJ2RDjc/H25jjLK/VndKM7tvKGZKYZGKIf4uyq7IeA6PPzu270vaPrL\ncwIDDMBRaRXECUyrbN0KdHp7jg2r0Eiu2bE11kO0AtkawaruQEjGk9mR7yqp\nPAGfm34ddOovEFoOROhigRw/W+q1874GBbPT/SA9eCF8dl5HfXHsbEnWHYc7\nfyAciQNNgWtjzNOEFs7b+OnjMfYAVCUDlNRSVsPkjZALL9LZwitr01OQW9oL\ne7OlFhvqhc/bTAcagZrhsVXmd4fRMJw8ZGZOloMFatXoVIkNjaNXyk7hf9+J\nBKdc/iW3v7oYNLBt4Jxf3x/Mp7kpKf+iMP2dT6/GTSLpiPv0fZcbsVI1x9Dw\nKrgb\r\n=i/QV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"*","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.18.0_1559737363177_0.2706298267500469","host":"s3://npm-registry-packages"}},"7.0.0-alpha034":{"name":"@uifabric/merge-styles","version":"7.0.0-alpha034","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-alpha034","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0c078695c15d4da9fdc019e63667b03a6c17b439","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-alpha034.tgz","fileCount":197,"integrity":"sha512-7VF1ILL4kT/giE9FzxXKVa+0P+1SRLuLtuWieLQnWrp3VrjEkX95N0rRxL5LA+dBFpBtSf1GPpgQvGWstSZJsg==","signatures":[{"sig":"MEUCIQCb22gXmziLKE8p/zbkM+Ue9nuphjgpZvRLYnY9G8h0qgIgUJ6KjhX3B1AqzBR+suSMX9WXLXWrBz/xegqZ04EslCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+ZfwCRA9TVsSAnZWagAAUpYP/AigN04w2wgAmxKAqYVo\nHeXvDs5rqKJvpgdvpEbCuYr2nNChNiHyPfo1PoQEqqqWQXgI5paknuWZMx4X\nPo0ta0dzeVYqTJOBO+sIf0ybb30gxQJBlx+COeIzfaoVveaZgJrvLygjOWqk\nTIUwcP779LJ/0TgiLKzDlQSTOBmcyhr6QBS5fLxp6XzWM+F4Dp7+1DezzaD9\nCJHLNI8aVa48u8+fZKlAasZ7DBVVrIV5h2HK9ockvDHF+PBdd/MNPJ5nIfiR\nrB1PvQi+ERH5KwTL+m+wQ/Skk6NLCV4nln1d9yA513KIb5u17HUxVmubMEmy\n7czlVv8p9kupPUJphLby1YfPe8BUKCfyvMERHG6kkjkVOMbdfyu+yRfybRA1\nCMri3OJ+fVFHKDunmVe8CCKOLMOG3R9ZfjdISRrMh2XeSnDC979du7XLRgM5\nx+JqY5ZAxpzrV3e+9TYCE7hFlvCDzBanCz8Lrk7ANGLtRMRPdkfGndRELuye\n9DR2WeWgAVBsk/FYbHgI/OOOip7R4H2n8C5sVYBEq7eXAjvw+GEyxuZqij4O\nsAGzlZ709Tds26f3diybsmFynIAJ1A+yjh+PZZOeE7qSBH0rBsLtx/e4/Kva\n8fP8TvFish140cVeFmdgbeGMGQu4ZwFivvYcUMhqs34ZHz9+OleU0iPP5Mmt\nyhyE\r\n=dqbR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":">=7.0.0-0 <8.0.0-0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":">=7.0.0-0 <8.0.0-0","@uifabric/tslint-rules":">=7.0.0-0 <8.0.0-0","@uifabric/prettier-rules":">=7.0.0-0 <8.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-alpha034_1559861231719_0.350659025003373","host":"s3://npm-registry-packages"}},"7.0.0-rc001":{"name":"@uifabric/merge-styles","version":"7.0.0-rc001","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-rc001","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"49b5363647c24102f085f05698ad4e65430b4bad","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-rc001.tgz","fileCount":197,"integrity":"sha512-rpr01uhCFBf2ixpgxwIbYRq/5oQ/5UpkqKaOSlUguKz9ZcEtfeQ5JbvI9A9Jzphfw1iuOjKnP1mPh7w7HHRS9Q==","signatures":[{"sig":"MEYCIQCACvIa7GjlAJj7E7iEQHpgAbWw0wFd82orb0seZa95vQIhAP66ZSgfDlEW+dIJJIRkenXAZqQIMSmpUKePLx6sZOHP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662877,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+u6MCRA9TVsSAnZWagAAvpcP/iKq14J/jx7J/rUaS7ai\ngItHnclkKsZmiIiso6QvHKxRZRmjiHO2dZMvn0fsz2OcPmZO404SVoKRyN5l\nTJ3ktzJjfQAnMjkB+JhlnLFuxkxn4jrMn3sNgq89l+LaHNqvKdAmjhOqpbKN\nlhZrg1NayDVPel40BnBGBYnq6Hh9u3Jtb9IZXrAJ3UNktiqkIh6HO/m0mue5\nC/v89Kq9Pp5v0wBlsa4J9dyGMAHn2I1fDx2fWag+TLt9FiIygaqwCsJ+I2nA\nESUhdIHqK15cwH13AZNT7u1wbChoVYhg09Q5XC/73zli/Wp5Tsl12LHXfagv\nkp15dicuYO1W7KtydpYe/IaDFHZ8w/lUhTOJNRVQjYPCnHl1DpYdy/WQXLjT\nP/2Nj6UlaGysPivWZapTb0r5y0N0QW9T2fOTVMrwU/HbUARKSzpI6tQMtlp4\n0rwCHHrKgtCeK/fAWhQZbRjEHdU3PRTdjemu7M0gUsAztVqBElJIcRwnN+eZ\nZjcSslbmJV50mQaLstR1YmmZJbPwV7XxWF3Fwlc9fXbGx5kbtGSb2psCYGOz\nggZHJor1A9JZo3s20lD9DPgmumyovTaWCVjLk01d4ccJ9MR6StZmVjN9GiWw\n/SjayCw/wVSmw8KfBTYjfiYh5kasSUbnxUWKuAJmqFLYklGNBgg65LYcPuZM\nNzqk\r\n=UC2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"7.0.0-rc001"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"7.0.0-rc001","@uifabric/tslint-rules":"7.0.0-rc001","@uifabric/prettier-rules":"7.0.0-rc001"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-rc001_1559948939781_0.8497879738094305","host":"s3://npm-registry-packages"}},"7.0.0-rc002":{"name":"@uifabric/merge-styles","version":"7.0.0-rc002","license":"MIT","_id":"@uifabric/merge-styles@7.0.0-rc002","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"571796b57f3dd0bf4acf32e31fa0c26dab379fab","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.0-rc002.tgz","fileCount":197,"integrity":"sha512-FwTUXmHwMr5p1oj8Bb+IVyTWC4x0TUhNggu1P/i2HrQF5FCwSKkECowGCS74br/m6/aqN1fjuj4j8NJu2+rPNQ==","signatures":[{"sig":"MEUCIEBe0mOZomBtk8sAb8d2XJLy2jrIxMX8JEBrSMX5mIQdAiEA+4cz1a1K1milSbOOYsjzQGiuFMNtoG5E6Hh7lCG185c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1662839,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/sZ+CRA9TVsSAnZWagAALWcQAIXj0D4wycbr6v67J8UD\n/83dOJO1N436XHd6N6MvFVxAoJwYCNyUtC108P+4xcaguUIMzWz3FB8Lye8g\nZ6vlcSkbMD9Ia6XUTEiVL5ifgIw0ehQLk4FYsKAAr86qjAO3JAAT9QmNXXOa\n7SSdRv+JMmUVad1UDQl8FVCMQVro+rwma7G4sVnmbt+IZ/L3JZfwkFJfaa1Q\nmrHabpFRU/WrGv7gc/XuMInU8/uw8r7nUw1tM1OoleQ4c1d4i7ASZIWAbvAx\nYQNUAuRDiiDMqNZI6O0Erb58Ncj6v9GLVtANif7A/MYLj6aYyssHTXrgwwch\nyfabWixdw6J7ihluCWKaa/yjxPY4tOhIP2l6Q0Xjwfhv7yY9J7WwwB/SpcQJ\n3eSQWvqPFACanteIAp1qd3MZTZgDyjI3YSWWXlOM3ptFbhm8uiO0nOL6l10v\n6Y1KGL3K0qAzyjwMD8LnF91KOfteRWEfalHAg/B4U6eSLS1XvBmFXT8mUHZv\nC9BHuaqT13Vf/0I0X+YRYNJF2E5z74paUNvDL43lvriD6bWuqYjwcrluvYZg\nDm3o6O4qSBmZ2hWG+HR6L20UojbHwua3bEAx2WRFoM0nNIHFT8SAMZRrmI3Y\ncy7tqg1hStwQWeXJNHVmdBywX9J5+9oVDsxYP/hNdjOjX++7SdBx9Si86Q0+\nSddK\r\n=I7dp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\r\n\r\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\r\n\r\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\r\n\r\nSimple usage:\r\n\r\n```\r\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\n// Produces 'css-0' class name which can be used anywhere\r\nmergeStyles({ background: 'red' });\r\n\r\n// Produces a class map for a bunch of rules all at once\r\nmergeStyleSets({\r\n  root: { background: 'red' },\r\n  child: { background: 'green' }\r\n});\r\n\r\n// Returns { root: 'root-0', child: 'child-1' }\r\n```\r\n\r\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\r\n\r\nThe 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.\r\n\r\n## Motivation\r\n\r\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\r\n\r\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\r\n\r\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\r\n\r\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\r\n\r\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\r\n\r\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\r\n\r\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\r\n\r\n- Reduce the build time overhead of running through CSS preprocessors.\r\n\r\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\r\n\r\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\r\n\r\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\r\n\r\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\r\n\r\n# API\r\n\r\nThe api surfaces consists of 3 methods and a handful of interfaces:\r\n\r\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\r\n\r\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\r\n\r\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\r\n\r\n## Vocabulary\r\n\r\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  left: 42\r\n};\r\n```\r\n\r\nAdditionally, **style objects** can contain selectors under the `selectors` property:\r\n\r\n```tsx\r\nlet style = {\r\n  backgroundColor: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      backgroundColor: 'blue';\r\n    },\r\n    '.parent &': { /* parent selector */ },\r\n    '& .child': { /* child selector */ }\r\n  }\r\n};\r\n```\r\n\r\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\r\n\r\n```tsx\r\nlet styleSet = {\r\n  root: { background: 'red' },\r\n  button: { margin: 42 }\r\n};\r\n```\r\n\r\n## Basic usage\r\n\r\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\r\n\r\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\r\n\r\n```tsx\r\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nexport interface IComponentClassNames {\r\n  root: string;\r\n  button: string;\r\n  buttonIcon: string;\r\n}\r\n\r\nexport const getClassNames = (): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: {\r\n        background: 'red'\r\n      }\r\n    ),\r\n\r\n    button: {\r\n      backgroundColor: 'green',\r\n    },\r\n\r\n    buttonIcon: {\r\n      margin: 10\r\n    }\r\n  });\r\n};\r\n```\r\n\r\nThe class map can then be used in a component:\r\n\r\n```tsx\r\nimport { getClassNames } from './MyComponent.classNames';\r\n\r\nexport const MyComponent = () => {\r\n  let { root, button, buttonIcon } = getClassNames();\r\n\r\n  return (\r\n    <div className={root}>\r\n      <button className={button}>\r\n        <i className={buttonIcon} />\r\n      </button>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n## Selectors\r\n\r\n### Basic pseudo-selectors (:hover, :active, etc)\r\n\r\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\r\n\r\n```tsx\r\n{\r\n  background: 'red',\r\n  selectors: {\r\n    ':hover': {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBy 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`:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n.css-0:hover {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Parent/child selectors\r\n\r\nIn 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:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    // selector relative to parent\r\n    '.ms-Fabric--isFocusVisible &': {\r\n      background: 'red'\r\n    }\r\n    // selector for child\r\n    '& .child' {\r\n      background: 'green'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis would register the rules:\r\n\r\n```css\r\n.ms-Fabric--isFocusVisible .css-0 {\r\n  background: red;\r\n}\r\n.css-0 .child {\r\n  background: green;\r\n}\r\n```\r\n\r\n### Global selectors\r\n\r\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\r\n\r\nTo register a selector globally, wrap it in a `:global()` wrapper:\r\n\r\n```tsx\r\n{\r\n  selectors: {\r\n    ':global(button)': {\r\n      overflow: 'visible'\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Media and feature queries\r\n\r\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\r\n\r\n```tsx\r\nmergeStyles({\r\n  background: 'red',\r\n  selectors: {\r\n    '@media(max-width: 600px)': {\r\n      background: 'green'\r\n    },\r\n    '@supports(display: grid)': {\r\n      display: 'grid'\r\n    }\r\n  }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.css-0 {\r\n  background: red;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  .css-0 {\r\n    background: green;\r\n  }\r\n}\r\n\r\n@supports (display: grid) {\r\n  .css-0 {\r\n    display: grid;\r\n  }\r\n}\r\n```\r\n\r\n### Referencing child elements within the mergeStyleSets scope\r\n\r\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\r\n\r\n```tsx\r\nmergeStyleSets({\r\n  root: { background: 'red' }\r\n  thumb: { background: 'green' }\r\n});\r\n```\r\n\r\nProduces:\r\n\r\n```css\r\n.root-0 {\r\n  background: red;\r\n}\r\n.thumb-1 {\r\n  background: green;\r\n}\r\n```\r\n\r\nIn 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. We recommend using global, non-changing static classnames\r\nto target the parent elements:\r\n\r\n```tsx\r\nconst classNames = {\r\n  root: 'Foo-root',\r\n  child: 'Foo-child'\r\n};\r\n\r\nmergeStyleSets({\r\n  root: [classNames.root, { background: 'lightgreen' }],\r\n\r\n  child: [\r\n    classNames.child,\r\n    {\r\n      selectors: {\r\n        [`.${classNames.root}:hover &`]: {\r\n          background: 'green'\r\n        }\r\n      }\r\n    }\r\n  ]\r\n});\r\n```\r\n\r\nThe important part here is that the selector does not have any mutable information. In the example above,\r\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\r\nwould be a performance hit.\r\n\r\n## Custom class names\r\n\r\nBy 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'.\r\n\r\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\r\n\r\nMerging rules like:\r\n\r\n```ts\r\nmergeStyleSets({ a: { ... }, b: { ... } })\r\n```\r\n\r\nWill produce the class name map:\r\n\r\n```ts\r\n{ a: 'a-0', b: 'b-1' }\r\n```\r\n\r\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\r\n\r\n```tsx\r\n{\r\n  displayName: 'MyComponent',\r\n  background: 'red'\r\n}\r\n```\r\n\r\nThis generates:\r\n\r\n```css\r\n.MyComponent-0 {\r\n  background: red;\r\n}\r\n```\r\n\r\n## Managing conditionals and states\r\n\r\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\r\n\r\nIn the following example, the root class generated will be different depending on the `isToggled` state:\r\n\r\n```tsx\r\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\r\n  return mergeStyleSets({\r\n    root: [\r\n      {\r\n        background: 'red'\r\n      },\r\n      isToggled && {\r\n        background: 'green'\r\n      }\r\n    ]\r\n  });\r\n};\r\n```\r\n\r\n## RTL support\r\n\r\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\r\n\r\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\r\n\r\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\r\n\r\n```tsx\r\nmergeStyles({\r\n  left: '42px @noflip'\r\n});\r\n```\r\n\r\n## Optimizing for performance\r\n\r\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\r\n\r\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\r\n\r\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\r\n\r\n```tsx\r\nimport { memoizeFunction } from '@uifabric/utilities';\r\n\r\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\r\n  return mergeStyleSets({\r\n    // ...\r\n  });\r\n});\r\n```\r\n\r\n## Registering fonts\r\n\r\nRegistering font faces example:\r\n\r\n```tsx\r\nimport { fontFace } from '@uifabric/merge-styles';\r\n\r\nfontFace({\r\n  fontFamily: `\"Segoe UI\"`,\r\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\r\n  fontWeight: 'normal'\r\n});\r\n```\r\n\r\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\r\n\r\n## Registering keyframes\r\n\r\nRegistering animation keyframes example:\r\n\r\n```tsx\r\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\r\n\r\nlet fadeIn = keyframes({\r\n  from: {\r\n    opacity: 0\r\n  },\r\n  to: {\r\n    opacity: 1\r\n  }\r\n});\r\n\r\nexport const getClassNames = () => {\r\n  return mergeStyleSets({\r\n    root: {\r\n      animationName: fadeIn\r\n    }\r\n  });\r\n};\r\n```\r\n\r\n## Server-side rendering\r\n\r\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\r\n\r\nExample:\r\n\r\n```tsx\r\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\r\n\r\nlet { html, css } = renderStatic(() => {\r\n  return ReactDOM.renderToString(...);\r\n});\r\n```\r\n\r\nCaveats for server-side rendering (TODOs):\r\n\r\n- Currently font face definitions and keyframes won't be included in the result.\r\n\r\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\r\n\r\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\r\n\r\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\r\n\r\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\r\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"7.0.0-rc002"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"7.0.0-rc002","@uifabric/tslint-rules":"7.0.0-rc002","@uifabric/prettier-rules":"7.0.0-rc002"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.0-rc002_1560200829415_0.6772356030036379","host":"s3://npm-registry-packages"}},"6.18.1":{"name":"@uifabric/merge-styles","version":"6.18.1","license":"MIT","_id":"@uifabric/merge-styles@6.18.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"214198cd52ca5b1129b0107ae016b2bef1d95173","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.18.1.tgz","fileCount":198,"integrity":"sha512-aqYwm5jaLOIqVrelwqoyuzQu4sHgC8JaklX3mKsL6jYJfo34KOqlkSg3oSiVc1cGegtM+f9XwAtSsNmoB2pkUA==","signatures":[{"sig":"MEUCIQDWOUGocmWmsbzOXZ07VlAQcIpRKz6WgFuukt0z1p9OXQIgECBh3ZqtcpVnoaNrm/hauxEWlQhiHJgBvBxmktPibJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1722508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/5zdCRA9TVsSAnZWagAA4QAP/RUIiRb8D4EnwrUyL0Lw\ndXUhy23QAuxo8wRXDN5y1Q9WGj52eIK+nOlwjpENPU8l5IO2POMsRK2TXczu\nwyUN0b8iDM702GrrSu2Yi4RgrQ1ZkGJ/z3mtzpbDN7njQ0lk4Cr7y6MduC6R\nOfQuf1aJ7wLFWGVhBkR5nnPqMS11S3DUWoYyvYBMLbIlrRQkdvGu6nUIaP6M\ndKwel9vX28vKQZuP6J8wiXS8t9PABcDyT7jMW6faBUbWkbGlmAoMvsSAJwoi\nH2QVrQJrW4yMvb1yKvep0JJyPSMVUlaQIXqZ1rB9ZBAoAyfXi5acrpCikA1X\nvLFjA47RSvD9jtu4dBbmG6yIDi06GSCMr9eTIiIwHUe/Rje2OyySO8z/8mKp\nNbQK6Y7Ziw0jyTwCfOF7iieiMPL95tcoBPnVMwSUmcEgTL2algpNLcW+Ty3S\n/HtiQjcuyRFgkGqNOt2K+vlUqdTKv4nw0IWRknNTACYQlBVG4RqaQMIjsr62\n5D9EmckV8/8iAH0iVIgAbnNEt1BTYraSsi9IR+wTbRIGpBcgmf4fbb4nYs3l\nT/sTJSB2PwnKOMtDMB8RMKYliGxVK2ckv+q2PbJU1KSxIFX+HdrpClLLV3Ug\nHJRp5ohSppJr9fkytxl+3YtqoSPLBlDPd7fkApPfArFmk1UCM8Ak3JQzJrot\nBpc5\r\n=z3YW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"*","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.18.1_1560255708439_0.12437525440710973","host":"s3://npm-registry-packages"}},"6.19.1":{"name":"@uifabric/merge-styles","version":"6.19.1","license":"MIT","_id":"@uifabric/merge-styles@6.19.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"61439a090bd7d08c8cc77776bab2b46585ac1c05","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.1.tgz","fileCount":198,"integrity":"sha512-D59Aqd+Fq88K7aPKPhRh9rzfnBWxJ2sMG1qOTFLW6PCfQrlsfRStyJBemIuKLk/DUEsqp7h6FFwGCapgc92QOw==","signatures":[{"sig":"MEUCIGuW22brPi4Y8RSW2R6z64JjvJM3/KjUxoy+Bc7Xc+6IAiEA6D3h7LU1a9y3o711v8RQaPyX1UNLUNugfSHZlDrOCLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1722960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAXmrCRA9TVsSAnZWagAAq+QP/2kjGjyukn2yAiH+WkUw\nicIVJlTh9Ty8mPDOrEA0rBXiVarO3Uuf9G7jw01O4DkmSIWyLDOpno6/b++2\niGgM9g7/gO4muzdXbrVKaEAWjpg03Oc75Z2BViqZiThCGRPq72xQA3umqj1F\niCv+zd8VC+a/7Z4YQWmt0HB4Uu+tcljvD9AZBjSZpz6YsqfDWQfe2RSNS9+C\nl7bYx75cy7KctfPX3zbLR2zGYoRGdUricUlzljlH9kQ+YjBKPbzUOHbWnwmF\nqKAW5o3IwGvKU1cLjx8eNF0rE+ywtn4oILB9cUJqy5WhcQdnUBjFvFA/Ryue\nEhHj8tXwiwN8bp4JHywW1R7ZluWPAZsI6OBzuFkDZktmI//dPaXiG9Ud8klr\n+hgG5FuqAAxmkHEvLb7r2qhuWxv1lD0Fvqj24R1jIFmEQzX2a13QWIK9kyOM\n9Gs/b1yb1QLMv0/yyVgw1/mKH0MNNRDbuc3KYhdD9RdG6aX48D6zgqM5gRSI\nuYkG307MI2wpe7w5d5hfqoqbdwzj8UChzIjCBB7Gip3SPVLyIG+hnooaH3UT\nxrVOJ9bZ7HpCqLKoGsgtq0GT8Eb7EG/0FtlBxjr2+Yc5SIJQsCL8BFCDnNep\nSXTQKkFMGhGckBK9YZ2m4lrK4PKLovxnNdTW36dhWsTaeEIEavKS2GVE26TT\nZBer\r\n=X77g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n\n```\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSets({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n- Reduce the build time overhead of running through CSS preprocessors.\n\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n};\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={root}>\n      <button className={button}>\n        <i className={buttonIcon} />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 {\n  background: red;\n}\n.css-0:hover {\n  background: green;\n}\n```\n\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 {\n  background: red;\n}\n.css-0 .child {\n  background: green;\n}\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media and feature queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    },\n    '@supports(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 {\n  background: red;\n}\n\n@media (max-width: 600px) {\n  .css-0 {\n    background: green;\n  }\n}\n\n@supports (display: grid) {\n  .css-0 {\n    display: grid;\n  }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 {\n  background: red;\n}\n.thumb-1 {\n  background: green;\n}\n```\n\nIn 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. We recommend using global, non-changing static classnames\nto target the parent elements:\n\n```tsx\nconst classNames = {\n  root: 'Foo-root',\n  child: 'Foo-child'\n};\n\nmergeStyleSets({\n  root: [classNames.root, { background: 'lightgreen' }],\n\n  child: [\n    classNames.child,\n    {\n      selectors: {\n        [`.${classNames.root}:hover &`]: {\n          background: 'green'\n        }\n      }\n    }\n  ]\n});\n```\n\nThe important part here is that the selector does not have any mutable information. In the example above,\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\nwould be a performance hit.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 {\n  background: red;\n}\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\n  return mergeStyleSets({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  });\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\n  return mergeStyleSets({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: 'normal'\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  from: {\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n- Currently font face definitions and keyframes won't be included in the result.\n\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"*","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.19.1_1560377770514_0.867237824628085","host":"s3://npm-registry-packages"}},"7.0.1":{"name":"@uifabric/merge-styles","version":"7.0.1","license":"MIT","_id":"@uifabric/merge-styles@7.0.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"9a0b997af58541b0c4a06d98e8c4745a4e2e0ea4","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.1.tgz","fileCount":138,"integrity":"sha512-TzoEkGWVl7bJNTbEXWDYjpQHXjdEc4lO6z3jME/sDWVc/TcmCJ9uKxfTFzE2IHAxGIlueQfUitAHMr+sel7HXg==","signatures":[{"sig":"MEYCIQDml/lRRp3anWAGsSZ9VA1KerhzOG+9Y4N1GDM1HeBLcgIhAMo/xMOBRIduebabReiwmv6JbqAbosT/tlTSGCpwAswK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1191874,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAZgfCRA9TVsSAnZWagAAWkoP/A7/VVBpWdfbobnZgNXS\n+K4OuWrwaL83MnBIaQTDfE36blr6eh7dUUzPHae3KQz8roqW7FRKe4LjAgXn\nJRL0OcNekqUdspdDZTitIc+sxyVRZ+fDBId4nc+j9nNhDcq1Ji5El3OffQH5\nybwBHsXoyirI7pz6/wQ9q83i8UXoZQ3mJhRhaEo6R3n91pdXlB5LHL4W/2UU\n9o0/yeuJjdHfFfasViEB/TnSLff2trU60KEmjjVuTTyyoJBYhvZ2fo5bwBwk\nrM/yEFnZssYfF0Hqpyphty8LpGRTI6nVpfTo93FQ6cX/aMA8xP9XbNqx8kW5\nT/yav7L3VJkOateFBIb0So8P1/ajRMD/Qjb0OkRTuz6nfVMfNvjsMBqDCAQC\nQmGmZG83rF/Kd0j+wYnJwKXFi7Gar/qFtM3qdOlZxCgkjezeBfFG3E23RXab\npk+SHjOJq5JVSwzhxkUsGLp/mnL0gF6oBNs50CDps0zbifRDtFqC4WKePRhK\nclLY5N6o3nJ7Sy8gpFyGmH5+Y4sol3GwhX78tzPI+Xg518J651aFETh5empn\n3q3jBWB6wc0I8fkCfyTW5TdkXcFGpJQxkXzwwZPWX8lt2C6bN/xzNSBaS5ci\nl84HWT9ipMvvUfgsqOs2dL7RV6Rd5aDfPjWgl1euNVXzfdQfEbKzkW13nuzT\nv5bi\r\n=Xh/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.1","@uifabric/prettier-rules":"^7.0.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.1_1560385566356_0.21871092510872003","host":"s3://npm-registry-packages"}},"6.19.2":{"name":"@uifabric/merge-styles","version":"6.19.2","license":"MIT","_id":"@uifabric/merge-styles@6.19.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"f6ee64341c253692b804f593977d87c33377079c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.2.tgz","fileCount":198,"integrity":"sha512-YlacOpdTGlQdw+XhrnZfzgHCtqp+Ueb4FOaqkyr7yHQrGFYDvE2J0St9uug/OUlPqyTNz6LXfjFoaaKeoZ0ktw==","signatures":[{"sig":"MEUCICcvtjxK+YxRRAn4OLMfJTTr71kcnaQIMY64HtpZ4EUQAiEA6M414BLNgEDF/HDzBL3nsIPbd4L6TZBiLqR7IaTcEwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1773837,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAw7BCRA9TVsSAnZWagAADEkP/Rq0S5x24dBcGwADSC5R\n3v1ypRbCaewIQ1XjGBPqeKNUOtktMpv3i9UvfmaZivICunBcQtKADRM/w3vg\nl/E+k5u23NPXlYRIEqzOhQ00cA8SgQzT+Mn+LvyF83GgI8Z77CVJPv0pRQxP\n6ZLq8vUpJeBRc3r8FICi6L+p7FQiqEmmIT7hwBm1QgF1Wt7By6FszSQ0DmCd\nQEejt/zwPgCldJn8p+dBZYI4P0V40u4PyKiFGXqZu9R4Oxh5Rjeoy+5krwZk\nVQ6tZ1vgkzpkjqsGQEfjrqdYXt2Yu78gouabppHmcxPo2HBdDRw1a4zSXFOR\nxUa2xwVgfucuRcZG7fAcLrCRyQgTdaQCFNG8zh07WotkqlRHZt12Ap8lTcn0\njeiiPpxJScFb4ADR+0eHGqruOGMmeNiUjdaxYsOUGuZwXkNvf0MP+sIOqsnQ\nLs5uawy1hErvT2QWN2XH39J9LWLOFwexFPe+gU36UmDodFxfBhLphF4/mW2+\n5Qur0F7J8HSwjBAvKsPtIBEmuwaXsOnBVKPGMUA2iZ0h2SKnb5kDjNUic+13\ntPJZK+bliz5Ri49rzxyKYsVT/hL6h8b8uvmzHAWO/f9JZLE1jhkCFEzBP4m5\n2FwuM4mo+zUQRuS3gGoUQMhPHZD2t4+2n0Gf9Sj1OlpPq2WU5LqqOA8jvv3A\nJ7Kj\r\n=VDtd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n\n```\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSets({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n- Reduce the build time overhead of running through CSS preprocessors.\n\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n};\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={root}>\n      <button className={button}>\n        <i className={buttonIcon} />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 {\n  background: red;\n}\n.css-0:hover {\n  background: green;\n}\n```\n\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 {\n  background: red;\n}\n.css-0 .child {\n  background: green;\n}\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media and feature queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    },\n    '@supports(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 {\n  background: red;\n}\n\n@media (max-width: 600px) {\n  .css-0 {\n    background: green;\n  }\n}\n\n@supports (display: grid) {\n  .css-0 {\n    display: grid;\n  }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 {\n  background: red;\n}\n.thumb-1 {\n  background: green;\n}\n```\n\nIn 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. We recommend using global, non-changing static classnames\nto target the parent elements:\n\n```tsx\nconst classNames = {\n  root: 'Foo-root',\n  child: 'Foo-child'\n};\n\nmergeStyleSets({\n  root: [classNames.root, { background: 'lightgreen' }],\n\n  child: [\n    classNames.child,\n    {\n      selectors: {\n        [`.${classNames.root}:hover &`]: {\n          background: 'green'\n        }\n      }\n    }\n  ]\n});\n```\n\nThe important part here is that the selector does not have any mutable information. In the example above,\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\nwould be a performance hit.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 {\n  background: red;\n}\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\n  return mergeStyleSets({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  });\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\n  return mergeStyleSets({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: 'normal'\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  from: {\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n- Currently font face definitions and keyframes won't be included in the result.\n\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"*","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.19.2_1560481473015_0.6476152344881816","host":"s3://npm-registry-packages"}},"7.0.2":{"name":"@uifabric/merge-styles","version":"7.0.2","license":"MIT","_id":"@uifabric/merge-styles@7.0.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a5ff23ab2544fda155f39d950a3e9ff2b931e997","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.0.2.tgz","fileCount":198,"integrity":"sha512-Eu8l28J7utJmoU4z7D0nsUgapakz2p4MEH7E0hqdudjAip8earlY7Yz7UxG4A+nv/H6xevLQFv+TA1SaGPiGmA==","signatures":[{"sig":"MEQCICiXGprg275AclundaxTDp2UsksAoSpx70r6GteKlp2OAiAJpM2ZRLgwQJ60Ca2fhrVzWAlm9xJN3LFAoTOoYAq4RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1726772,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA5LdCRA9TVsSAnZWagAAKmMQAJT3TLvpPU2g5SOYIcmm\nEGComHwcVxy9uDsFc1IPmAeCzbSQ5pLln4mWzMTLYPGPSbbQ71eFFkRzDk1n\ndDTwb8R/PhMtXOCRsIfGmncL7jWbER9POklE/o1zsW7B+E5o6bZJS9IYXFhL\nPqwNXGUL16TuW5SDJSiheH3xaHO0iKCGPWCY3vwi37khIIQekHdCvkXl2vTT\n2BVtoKIEGISVx+l3BkkBbtBuH7d0wEV0x8/ta9DAMvns2qCg6it305yCpVAh\nWr2bE/8canWE7njp279gu439QFgXm4UtxgPYXjn3BZ0BlOXye3wqwqt6QflM\n3bGqyBEa3vUMaigDi8A4Hnh3YEqB6qiuXYacAsPQQSJRJH27tVP1LJbS9SMN\nJeEnJZTqDCcen6l0uQOvKzmRe/z9+YoGjzNrGfTgxDd27XrJa72xygu6bCwE\n5VtGVYFOcEVlTNztanRUnLOh7TQxzHHUlAFZyjJ8NRs+JGxlCHUqsSePtXFL\nrRY1w0BHLulNA6+Kmt7tsVQTIyCIXerYIuvTzO5jLU3BReMWOiDAU/YqbD7e\niwIWVADqjoCdGeF3NFwNcRBjyrIr67tqWUAn+eZ4GJCP+4JVwyCNxweC1sKe\nBY12IC+e3OiBJFGrfbVfa8Z7gIKbm8Ey5HpGT+4IcY4Pv+0NlooKW3YfU3gZ\nXMCz\r\n=dlwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.2","@uifabric/prettier-rules":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.0.2_1560515292161_0.19405772379968966","host":"s3://npm-registry-packages"}},"7.1.0":{"name":"@uifabric/merge-styles","version":"7.1.0","license":"MIT","_id":"@uifabric/merge-styles@7.1.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"dff9b60986021d710592ca17353691c4fb93c8ef","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.1.0.tgz","fileCount":198,"integrity":"sha512-mwGm5bDXfnnstFEep2/19KEMH9jf4tVx4btpTFRZoZPZcDFhe5Ia/vlqxRRgFVswBSo8Xk8G/E0y9FTRfIO/Ew==","signatures":[{"sig":"MEYCIQCVNI7vEVznfjrMqt3c18uVLiz0yo8KJbuXsy/q/HcCaAIhAL/ByjGo6kokaOC98MDH0S+wP86BiLqy5xQt7hdKan2l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1780482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFQoOCRA9TVsSAnZWagAAkb8P/0gFfO0vvBK1WUuB2bpr\n8jE8dqVlQJdCQ9cr47IBVPF1WDWqT/6Ra94l2SPf1Q1x4FyhRmh424WORSma\ndxfTcGfRu1Nr9hTA+PtK2CgpNmRRbebo4jGDBLPN8yLbonpahTtiVpvvn0dY\nzs0J87xdjkJtCAwh27Vu5hq0cLcBbDhlTi2RdahjlvstfO4coTBxTZTtgUE7\nXtEbQKA3WAdpumpgPxN0BsS43JlL58/A4kGXoZYF8chHSOzgfmOYqohk+0vh\nE2ENakPX9OXTvB0WbspJ5xf0mW53APKOsqoGLJVdV6koCtG4WcbX8DJliqd7\n7iatC+6tHAjjCsERC9v4wANYJZ/2o074G0M5qo3+pZq0VFBE1kdX9VeJXNVM\n7Nycw0Y/Jsy5HSHTCA1CnbKXd0caDFU9/RYZXiXxT8whH5+LQPpQmWt3C0wT\nlW8x7ELOGj/Shk+dSWC9zjdTkCp8AUqlfMw9BONPCWC0YoBVygDs/rXHC80u\n/Nm2b2GeFA5NnauOHMJlRqgkJSGq2vl1pu6MbhHXs2CmXqs3nPoMH+usGXa4\n5Ojkfp07GAdNuhpksEuDb5/RtjwEKa9CHj+ohaLoTyhDqMo+U7H8KOZg552m\nPgM51cOgHGN15MBKGvIEjUnJGw8B8rcaj/07z6pOUfAmBLWqoQRMue4gR1pb\ne7O0\r\n=WTzX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.2","@uifabric/prettier-rules":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.1.0_1561659917422_0.29442631935123487","host":"s3://npm-registry-packages"}},"7.1.1":{"name":"@uifabric/merge-styles","version":"7.1.1","license":"MIT","_id":"@uifabric/merge-styles@7.1.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"8af9f5b7e7f6e5597d9d18c7f87077d1fe04e60c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.1.1.tgz","fileCount":198,"integrity":"sha512-FrQvdydkFPcwLkI4GykKdeUXMZJ6VlAsWl5McNDZq3UQEkwDS69OUwwA+zdwtNZMSrgo5TT1MshViUvwHvFFIA==","signatures":[{"sig":"MEUCIDNrjHMMe6YLe/d0lO1tg7JXi+4AiMg3DrHK9UdU7jopAiEAlhYgMC2B9NMYR9h2pZopoMv6r3uhNtAAocoSQJAYXSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1784568,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdGlZOCRA9TVsSAnZWagAA8EkP/3VAus0JN2JoTSobgMrZ\nFjD0x/Ak55NvHR3sG8BOvTPxmHGVTJAl6kNxTidvviwBXCeRdYSXONL3gG7y\n8/HZQq3D8qxjllUTtd1SpDnajkuFIG3ti48NolrbbUULqvazwB+yn3gXCDpY\npnHt+a7q3Zq1To77Xdcx7CG3bGwinlDkFHXsja8sjqXFQfssDVNMFxLzigyQ\nfIvDpbhyW5DPDFZjOdnWXM/AKX+FVdpQyWx5k2pbsDE0VgxfWWwMaI1cqD96\nOHMrcTDSXrvEAXhcUQ5FjXU9BaCxp6PWr/uh9944HKpXJCeyH7QE5pK3Ffzh\nHW3FlslwNltBj2BJkLsjZI6Y29NKuJsM5YD0lybfPt81EBCdGoiW/PsfxrEO\nt4do6XHMfidN2LaNopAL5yYSyxo3p7bFvqbjtHjXb+IfVqrz6ihY4oR1++KC\nuNwNp9P7v8EKOAXoHLhELOrenMaM6PdXN65KlAkoXaMCekK8RVtQTBF/GLqQ\n9d7u776eDtLwIDLEzzFAWDSecSKprQeEV1H4OVSqAmmQ+NpjtgH3lFV2rdoj\n9kg/0vm0ZjGa5Y3L0NcqFDYGwDx3vNAbF13kCJMiYWEGt2gfXdHX2D/dsUJO\nribEoxUAa5ZOSYjaJ4bf/trWDuKSxuyVXZTWDInFKDjIEM23pzaKzwO+PoBb\nVZSc\r\n=RbzR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.0"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.2","@uifabric/prettier-rules":"^7.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.1.1_1562007116840_0.045947324377269005","host":"s3://npm-registry-packages"}},"7.2.0":{"name":"@uifabric/merge-styles","version":"7.2.0","license":"MIT","_id":"@uifabric/merge-styles@7.2.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"1ad604368066dc801f584de6c23c072680ec97dd","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.2.0.tgz","fileCount":198,"integrity":"sha512-EA2aNl7jn3nUxwFZSausAr1MU8/C1pjLwyuLIQ4t0u86QW+MJuagXZY2X//oLPzvnACDrA5Z3SOcVbi+uzfTXA==","signatures":[{"sig":"MEQCIAZpT3WuEZbe3HbQjpBDJrVXtVi81fC7PGnqor3Ihi1FAiAjDNVRLao7Zc+LXk/2BJc4t9n7AVCK2COTpUa2rIpJNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1794348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdL2+ICRA9TVsSAnZWagAANEMP/3jYDVjtCBm7P6BeA3Oz\n0/2AF5GVSrj+nKhE1nrDQ9V+XwiGJWYQ1OhGB1GBZgcdYUERT0GG/lFvOO8b\naMkqopD+DQ68xLQ9qa7heEe0DIwXjQ+ntMG164dtvmdWazaooj5cfItQcEsF\nMNxPQmendDni2GnD6ebtZUMHpgG0xxrEkzf/NEXiL635zVT6Zdpub1Pz4ru6\nz4u1Ok2Uvx/UmtORm/dfesVJKn0N5a6RrqcE4rJsvc8/2KD4sammC9MDv3z9\nN3yhNUlPyMdwVgGiXnry8b9eLGUwfzDH/LL0c6giTPOF00BCuiU40kUoO2/c\nh0M2t/MlKEkbBeVQ7lLjEC4WgHJ0i31mNO1gmmeA7IuLvo9v3xW/OYqkdTrp\nujZyKeXmGq9nwDIdM9yLQaiKubKqEInR9jrE+0QsUqiwGkB6Bdjfsz1S+Kft\nQ+hhsZTdPDIxMa+CUdK1Uouu+loyl/zpndCnjdIgb988ajGb6SOUmuyfRbbb\n9QbeNmMpk9G1p+9/us53E28DY3Yn9Pdw4tM+R3C2XM3A8NZfeIyaj3gJq9sE\nLgvb76P1zAkjoS/y1Bycn1nvQyut06wyAb+5YOtTqw360WMal1gHhwb7Tvap\n7J1U5tKRfXUSPpk4EtYCSrbQ8EShhz+jyHHymKBVdHWx1TOkZ8K8osKxPVS0\ns45K\r\n=7qAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.1"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.3","@uifabric/prettier-rules":"^7.0.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.2.0_1563389831476_0.9532609228109159","host":"s3://npm-registry-packages"}},"6.19.3":{"name":"@uifabric/merge-styles","version":"6.19.3","license":"MIT","_id":"@uifabric/merge-styles@6.19.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"cfc89cfbd3f148b559e30f1ac30eac2a8259687d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.3.tgz","fileCount":198,"integrity":"sha512-89JXEvl6bIQQqQLJ8T3fXcmKpvJfzqer/noFcAHHq/Gbo1wT8pixiDgUQm9vpTB7lpyjfSfw3PAh5Xt5UFFYOg==","signatures":[{"sig":"MEUCIQDvQNPKBD96w1jPJHqsmUeafMvcu2bCi9XaT2x0wpCd2QIgO9pDu8RfZHeLs2eVPpHeixY1wLb8i8GxQS/sRoKgioM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1774582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNaprCRA9TVsSAnZWagAA+G0P/3I/2f6IOFnPhOmhoLNU\ny/EOgvCbalKDO7VKqkGUmcft8b3UY0sr7LHd3tsk8l1MuUSUPyQfwiY38/XL\npEOxbUb5R4IXpkw+MIpucmbiAdW9sE6ZmlJY3alMJkRCYVW3UkzYDOOjadOa\nxtp9aUtysyw5Z+Tr81IyNL37EyFQDrln8JmkwBfTfOCosJFiyKAhHw9RRLRo\nrXXLzd1tgt9GI5+IXaoTZjirK8jyH180adDeC0k4a5R4v4KC8wHNmhR9Gz/F\nFJP+LxEzgdpVi3bZChweCdV76CBl99HK3dabWhRpuGtdSd1qkzp4p06wERaY\ny4a3R+3oPmZvw256uudOF7DlFHCcNAGC12sGcWnIpfsZnLisbyMoMtGPyN1a\nljXL3V9W6Q7mBtQsPfMJMDew/bruALGgvPJ4r7E8MlRHyNPqgoJnnn1LyjuA\n+PRJyBc/QV3E7vb1cvGlsMxu8u0E31MeQEowfogTjHpRfvMNOYNUTsBIMd6k\nnURH2RWHL+Yv/D0Brr5P4+3D8uy5xhATncIzz4uqx+bB96wDJeDHC0u/ghlU\neWDUwTm7b9PGErL0cFYFUVfmc7hf0pGGTO21J5+y+nbJTe/EK0uVUe05sV4t\n2+N2sb1vV+tWPMXZktwZ8cRaca8cRw+hRfmg7ArOsCFC/cVJWH/VSaFFjPhS\nmyBx\r\n=a6qo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n\n```\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSets({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n- Reduce the build time overhead of running through CSS preprocessors.\n\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n};\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={root}>\n      <button className={button}>\n        <i className={buttonIcon} />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 {\n  background: red;\n}\n.css-0:hover {\n  background: green;\n}\n```\n\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 {\n  background: red;\n}\n.css-0 .child {\n  background: green;\n}\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media and feature queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    },\n    '@supports(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 {\n  background: red;\n}\n\n@media (max-width: 600px) {\n  .css-0 {\n    background: green;\n  }\n}\n\n@supports (display: grid) {\n  .css-0 {\n    display: grid;\n  }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 {\n  background: red;\n}\n.thumb-1 {\n  background: green;\n}\n```\n\nIn 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. We recommend using global, non-changing static classnames\nto target the parent elements:\n\n```tsx\nconst classNames = {\n  root: 'Foo-root',\n  child: 'Foo-child'\n};\n\nmergeStyleSets({\n  root: [classNames.root, { background: 'lightgreen' }],\n\n  child: [\n    classNames.child,\n    {\n      selectors: {\n        [`.${classNames.root}:hover &`]: {\n          background: 'green'\n        }\n      }\n    }\n  ]\n});\n```\n\nThe important part here is that the selector does not have any mutable information. In the example above,\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\nwould be a performance hit.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 {\n  background: red;\n}\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\n  return mergeStyleSets({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  });\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\n  return mergeStyleSets({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: 'normal'\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  from: {\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n- Currently font face definitions and keyframes won't be included in the result.\n\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"*","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.19.3_1563798122268_0.6666940131311783","host":"s3://npm-registry-packages"}},"7.3.0":{"name":"@uifabric/merge-styles","version":"7.3.0","license":"MIT","_id":"@uifabric/merge-styles@7.3.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"a851fd19a9e82acd1cffdcd122eec46388f4646f","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.3.0.tgz","fileCount":196,"integrity":"sha512-n8Edoum0yiBsddyUaiosVMTKItImnkErlOsVosPidTOVYK+4YdRZIQJl2jVEAlxhXkGwzppSsYcvnd/IIqaK8A==","signatures":[{"sig":"MEYCIQCjXisweacdByxU3yImf58CuD9Bhn+GQUi04CPFeisbMwIhAJ4cMOWtpyEqU13UrURgo5UXvh4ao5XQOvJqeqOCO0Ai","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1775645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSsTDCRA9TVsSAnZWagAAHVEP/1XqK7bgjn8UxH7ksb+g\nMrJuL96caNRB38x8kBqcLLSDuX32DxczLJI4GlRujfcYtE6Z1/DgDo6PFoEs\nQZAr+KyVlnvlu4sJK2qOAs4aDFj8V1mdmPTf9jNZ/yS9J3tYe3JAjEMM/a95\n48gmCeAGKWqo2DV1Abpr3izGpXJihFsGlUuenPrcGP6rw7i2R6dIVJTk12ZR\nUxDL/62OyW0E7M5jfPJgD22/xrc2JhY5xMvS9zp2Nv/sbOC7/Svj14UBDAsK\nJDCoEUdk2fexS0IRbmZKaNt4nmK8X2AwHa00QXoV53AWKGwAkB1cT8gDvGdI\nZI2ZlkDN6kKfYIylCoYNmxm9sPCXZvYRBuxJ/+grg/vLRVGA8+zFs9trEwUz\n5GCdQf6oZzUZknmqEvrQAh6UxCdEx4paMpS+FoXZ60AZxI8/XhyaAbkaSnUo\ndfhM0tV2Zh/9IM0uFA4dhRgmHnkRDeL8u2/1T53Js8DxJBJX2FhFFCQENffa\nR5Ez2LTmastYRfgP0TAV8Fr8q2PaQKe1/cVOYb505oQ8nhPxSGs1hjRLGVPT\nXJfZjSJCn3NCajMKs5HBaJqfhQ84Bh1JIKhEZb96adSixY1PxWREqk2TCi70\nE2frZ5bj1DXnTDBsAJ1yrqDfOYdEe//dr/dZMxF5yYtp281t9VmvmMhTBo6M\nE81q\r\n=sVPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.2","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.1"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.3","@uifabric/prettier-rules":"^7.0.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.3.0_1565181122237_0.8854589880545356","host":"s3://npm-registry-packages"}},"7.4.0":{"name":"@uifabric/merge-styles","version":"7.4.0","license":"MIT","_id":"@uifabric/merge-styles@7.4.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d5d06cdde5c66b7937569e23f05f17f450a5a783","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.4.0.tgz","fileCount":196,"integrity":"sha512-E9YoA//zpLb/lsZBfNRLL7MHhqD+ilUM/1b3ceScuVzx26C6qtB7Bvc1ZZSuhj9QrYrnhUuLY1wohpEHwradPQ==","signatures":[{"sig":"MEUCIQCCKkWvBfTNvUNKQow9Wx1QG0cI1jaQrLulpeBpwN16JwIgH2HHT/43WJG+0/c6eN6O5pyuGKRnftv8XM2Iwxt3Dzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1813089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUq13CRA9TVsSAnZWagAAeQgP/AmGe5yHuaHdVsQ34ubU\nvGjoisFzWiduQ0obbigBs7gJrbSY7krVQJ/3fYbjgF3dX/OmTsZ4ttQLNDHd\nrL5lNel65SKShxJqFvMtyajRNdVVHkRmNdF6LMt/WrnhUUM25YJMX5aEnhUW\n+Cr9Ahv1EL65vp8MuhyrVbnOyX05vuSRjDkxsYl+0munRIvVVdARgivrhFXd\nH9QVxqjDDjq7xYlCcvNSbqRAKHfx7KLZ9/IzyPETEWtVLaewWYqOrs6vzXkP\n648mlva0lAUSNoXWH9uceVRPrBsRo7sNzhBRs7sXvjazMYvNfJhSYZKRi3JK\nw8DI27dflhATcljIoxuBFXa8uFdfjsfiihP4RNBFxi5pKbqLbNnSINRpUrIK\nTsLIA12VX6wBUlqZEZ4VJM5NP/qFU8EG9/Z+TiZfzOyWaA1OG8r1x/1F6h0q\nSFZIgnsA08ujUEmsWvxpuwvdxTtzMCw3lEULr7fQaKfrfs9y+WS0Ffeqe0U9\nQ7IopWwTZE8t2ChUDZJ4VBsa8ulV6WGO/V9syctohw2qgMJ8fJMaL4hzYBOR\nbeskp5CER+MA9FGIlBKvPWJshWl39qWI4Jkjwkx9Fx/iFA3xm4r665dJb7WE\nYCagL9FBfKZpC0qKxbJe3t5vt43Dyh/Zz8X27ydQt2agc5Np4mae0TDhsAYT\nZOS+\r\n=52rD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.2","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.1"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.3","@uifabric/prettier-rules":"^7.0.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.4.0_1565699446752_0.6052996415857952","host":"s3://npm-registry-packages"}},"7.4.1":{"name":"@uifabric/merge-styles","version":"7.4.1","license":"MIT","_id":"@uifabric/merge-styles@7.4.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"67b64fd8aee63be2509350a0192441fb191bd613","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.4.1.tgz","fileCount":193,"integrity":"sha512-+wbek0NprLzJ8g8j064q6zmPYmbwQKxxV0riRJVXAfQBZma/Le43Vdsxl/FOsm0j7NBdIQh8Adti2BH/6C9j2Q==","signatures":[{"sig":"MEQCID6iyLElj7SyZdSIpW0htf+1Bt0MRmBl6IIB3g3IWoG2AiAv82UFUar80ni9xVJ+PtRTT2eQSThSTU6E3B4ugyE7VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1231257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdX903CRA9TVsSAnZWagAA/1cP/2qiQIs+BTI5nPszAyZB\n8GqKsmlfgYGOJjva6GtA9Vc1V5XKTLal55dq66VDWR70ni93EVqzQ08lk4WG\nh/0lAfMSRVZZ8Otu5M7UBfB9ueTwqWu1O0TPAOSuut2MRo6mQFSWNlI+j++L\nojvsRA3HFYYs8CrA8rrQUOje7k6vSjGZ+YveTRY7NxrwKygOr6R/874wd390\noOteN5fV9U7tBFncvH5xurvnerUvTixmfiZ/QlZLB6WcLRL8l1E2GteQnoTI\nEbx8FCFIaqg3z9guSSbFQ3KFXJua4Ie6AJRm+lVBM/zb2EsnmPgNvdCJfaQB\nA6XMI6WVjmRbfmF6+ANuXNqobdHGU7+0BRQ0NZ2yssvJFjPE0UuU5SyrpJ/E\nJxXoDeLQxTjNNlOIeA/e4AOZ8IpilXRvI7YIvqNJ6Drx3pNhFC8Dc0oOj7qO\n/ezmxSrlbSABVzdIEo/+78EuqKedr8rEuuuYw1HhEil6sFrsox3mMEOIlpOF\nfZWMjCulvcc4QWn3yfDtWzeLlS4yvv+2JNUpiojvu21YohKRrS1XvfR/2JDy\nSq1i06018qwcxTzwbJn6zGPOvxT/0Tz61dJ8dxOYof73tzsxTlCjvi+kRKO9\n+kFnKGd7tJmkfFE8YEDhUAcN1Oi3f9oETqv3xJAsRD9fTdZzRtyjW5enil85\n5bOQ\r\n=OywB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.4.1_1566563638840_0.9465191954411312","host":"s3://npm-registry-packages"}},"7.5.0":{"name":"@uifabric/merge-styles","version":"7.5.0","license":"MIT","_id":"@uifabric/merge-styles@7.5.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d58a76f3d128e4969e2248c128ef213dd6f815b7","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.5.0.tgz","fileCount":193,"integrity":"sha512-pnmEZ+Bt2FPcXV48LSYJORsHDtj6pLZcQJ0AQND51McgLA118UsTPf1WMsa64udnA3m/tFTLda0wPfvy8QpCbA==","signatures":[{"sig":"MEYCIQDGEyj4VjGbBCMH09qe6/N6iufglQd3bTUjAxS0UzbzQQIhAOO2GXwJhk2t8UUEFhUeMCoeNLjGnXwUdhID1mCtMzKl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1231465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdY9DVCRA9TVsSAnZWagAAEjgP/3a2Y2mKlSeAfObpABAi\nlZ20uMetXdYPVCA5NR5n824gge0yXq5CvYyVv/IDOrwXKg68V2rU3dpRNpQ9\niXd0P15gwvvkehMKI+dakvxdJ4EkQ3+eLLJ6ss+3eFrGWOOsLxmusSsb/RGG\nA4PdLAQgo7wEMEVSb6N+YsMaDoROaqjpKlr7vY5G+mSyHcG9gA11a5c9S51r\nm3RLkQnBB9qGNap2Z2NHoiX8Cx7ET2DjN3cc6E7dz34AWiyQNUi752wj4IRw\nu1utONIE5IEbdZlNISOEyDlq+39GxNzW9+2N9RPNvvSmYT+YSjVlTo8UgQ/n\n3lI3rD972N7NF64feFF5hLrUhloLYJgK6YXBv2MWETbvwnDfK26a+8r3fb4B\nWQ9lQrosLYSH/PVa09uehNWuOF0Y/sAjZPIHQO0y7Wu4k4TCjoWhLE7S8id9\noIUu6TunYEXsEk4HPkPRXo+ktqIZnWGduejDLOnLfoHm4bNkoA2wkwyhf69C\nRtQp7R8iFZM/EEHbNosMZq/DAIDGvAdQxdY/LWQdrPAeYjSTyi5g2lljQM/I\nbCDe9AHqXuF0+0bCxK0K6j7G9fqpqHEP+RgWrotOPu2BVzLwypRs9SZ3hxig\nPopWRc+ChQNKXevS1axaBLxKfBPkaEzA3IrK+rE65I+iMW1W4RR2AoVfYwGG\n0Onu\r\n=FOQn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.5.0_1566822612907_0.9072945859817703","host":"s3://npm-registry-packages"}},"7.5.1":{"name":"@uifabric/merge-styles","version":"7.5.1","license":"MIT","_id":"@uifabric/merge-styles@7.5.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7ff625eba56e2d4b57e31694f0f410e56500667d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.5.1.tgz","fileCount":193,"integrity":"sha512-uhgTryb8YCbnd8Q/o6H644QMqUX/nhGAK7IGgv8G1lLwUY0zMuBBFTSXa6+oGMgsLZxNQupdhkyJ5GzgDhg5Pw==","signatures":[{"sig":"MEUCIQDG1zFVAvhaxEJzijfr51Rvjl6LMGdviF77rJCefsJLHgIgZV50snLmgTC/t/TjdaPoJotzXo8/KrCpSwguEiCT0pE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1231885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbzjfCRA9TVsSAnZWagAAmzgP/3CTwgCiYQGKO8S/91yY\nCRlPYfPW7ETf2Vs4d4raHUdlw/Z1mZfZPStHc8IIL2ypB7yWrFFAWU2+7HKD\neM8rC/x+LpU7YLoJFS9GXSCyA5/5r+OTPI5Pxz8Whtc3nzjquP5JUCn3YixJ\nECfqdu3EdA0OdSNXD5qhttMgn3h/8n93kaVElBD1JT6Xql+5B63y4E/Te6dq\naEcspaTs4EftSFyYyBNXu/U3pC7s8KcimKfJve8Gq+Xn/oaGSiscy8h0qQVH\nK1wF1nluiESfnwpZXS+SdqHIf0/hK8L2cM8RcLeHVYjzb+/K+nXi5+znA/mP\n1q5Hj3FDIJIwaI/J4mCCwls5qUG2iwbJpYoahRZ5s+tX0N50btTTj1PP91j1\nsGFumBwWukSmyke1WHKLM4fwrEKwNMbm8mV/4LenQQ+KxCUGXvbC3T46X90p\ny8eCWg8XvsB/sWoV5VXOLX3AxpfGV9s3CwMa79w6E9FueS6Fjh8gGlHnGBnp\nHGrIIZ4ybW3JTCfaX6FCVlsOnssD51OvHx2YMtYw4rF//hRatBMc1vWqpwCM\n9lFPV5JuUn3KlCe7b15vRG6WX7SzKKpX1KkwzwjGHJhDoFVIDWDGg7gSIWjC\n8hk01yELf1vh4Ot4FtfgGDsc0sSvs1BgGVqArqC3fY65WpW5WCHnMfIAe/J8\nyY/i\r\n=Mo59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.5.1_1567570143118_0.984134842881206","host":"s3://npm-registry-packages"}},"6.19.4":{"name":"@uifabric/merge-styles","version":"6.19.4","license":"MIT","_id":"@uifabric/merge-styles@6.19.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"986a068a6109d699831d3adedcf286a0e042cb58","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz","fileCount":198,"integrity":"sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==","signatures":[{"sig":"MEYCIQC19uEP/iKJRDBu68uDQ9Q3TfHsdy84X/W0bxV/mgg/kAIhAPH5q9Kly3s5LR3AIpy6Y6+DcKVyq09CZJcLV99up2en","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1775059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb6y2CRA9TVsSAnZWagAAKlMP/0pJHbr1+8FGp1bR2e7L\nfk4NVY1MHsFwxp6FDMAAGVdQBg9ce57lAPG/n5/Ie2UN0rvDge60g6o/INQN\nqHzD1q1HHba8XYBgvGZrmEj+9yhSVr/7ymH3HTte879kQwdW7Kw0oiJVMUrd\njOAor8fuRRPwznNA+o1OuPndIG3KsGwSq8MReJ1j44Bh47BTyMbd8BdEALwN\nPwkRa9yiD13C/kPtwCet3umW+MGXC8khZtvznZrh+M3DHzkFmeCkB6YOnlut\nEm0CPBWRBxADhmLNIFSIIe8YAkFo4G81nIj5yj3jRKbjHjB+lGN0sXe9/aRQ\nTS0IzvxlvFNtRlayIPuP0J9IpIwOP3Z7L/KwI4Iu02ffBiSSM6U95sW4JCXC\n62+JjO0VtjtRDxFEuucsSjOSrvCGPwvIPbSfirxzBGcCcrezf3Fc8BYcVwmP\nB2HVxrNluC+X+dCq8bS/do9xHeSgqPGNgdstT9rHaHO6QKw5zGEdctUG5b1K\n42nrHh+CgxJxkj+0FlJXc91R6lWC8LbZsNcawtFCpHeTfsfOwZiJju/e95jD\nBvdI4L6P31AAlS4z9rjfQJTJWC6Qu/A7nRDb71NlqpH5gafOmguFfL7fah46\nNiLa/0whDy9LRY/Ym3ncTCqzLo+PAmD150ZYaMY1Zjp9/VbIFGGQVJ+i/1Rc\nCfDY\r\n=4AK8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","readme":"# [merge-styles](http://dev.office.com/fabric)\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n\n```\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSets({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n- Reduce the build time overhead of running through CSS preprocessors.\n\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSet(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42\n};\n```\n\nAdditionally, **style objects** can contain selectors under the `selectors` property:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue';\n    },\n    '.parent &': { /* parent selector */ },\n    '& .child': { /* child selector */ }\n  }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would defint this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 }\n};\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n        background: 'red'\n      }\n    ),\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10\n    }\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={root}>\n      <button className={button}>\n        <i className={buttonIcon} />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions under the `selectors` section:\n\n```tsx\n{\n  background: 'red',\n  selectors: {\n    ':hover': {\n      background: 'green'\n    }\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 {\n  background: red;\n}\n.css-0:hover {\n  background: green;\n}\n```\n\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  selectors: {\n    // selector relative to parent\n    '.ms-Fabric--isFocusVisible &': {\n      background: 'red'\n    }\n    // selector for child\n    '& .child' {\n      background: 'green'\n    }\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 {\n  background: red;\n}\n.css-0 .child {\n  background: green;\n}\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  selectors: {\n    ':global(button)': {\n      overflow: 'visible'\n    }\n  }\n}\n```\n\n### Media and feature queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  selectors: {\n    '@media(max-width: 600px)': {\n      background: 'green'\n    },\n    '@supports(display: grid)': {\n      display: 'grid'\n    }\n  }\n});\n```\n\nProduces:\n\n```css\n.css-0 {\n  background: red;\n}\n\n@media (max-width: 600px) {\n  .css-0 {\n    background: green;\n  }\n}\n\n@supports (display: grid) {\n  .css-0 {\n    display: grid;\n  }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 {\n  background: red;\n}\n.thumb-1 {\n  background: green;\n}\n```\n\nIn 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. We recommend using global, non-changing static classnames\nto target the parent elements:\n\n```tsx\nconst classNames = {\n  root: 'Foo-root',\n  child: 'Foo-child'\n};\n\nmergeStyleSets({\n  root: [classNames.root, { background: 'lightgreen' }],\n\n  child: [\n    classNames.child,\n    {\n      selectors: {\n        [`.${classNames.root}:hover &`]: {\n          background: 'green'\n        }\n      }\n    }\n  ]\n});\n```\n\nThe important part here is that the selector does not have any mutable information. In the example above,\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\nwould be a performance hit.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 {\n  background: red;\n}\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\n  return mergeStyleSets({\n    root: [\n      {\n        background: 'red'\n      },\n      isToggled && {\n        background: 'green'\n      }\n    ]\n  });\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip'\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\n  return mergeStyleSets({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: 'normal'\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  from: {\n    opacity: 0\n  },\n  to: {\n    opacity: 1\n  }\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn\n    }\n  });\n};\n```\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering (TODOs):\n\n- Currently font face definitions and keyframes won't be included in the result.\n\n- Using the `memoizeFunction` utility may short circuit calling merge-styles APIs to register styles, which may cause the helper here to skip returning css. This can be fixed, but it is currently a known limitation.\n\n- Until all Fabric components use the merge-styles library, this will only return a subset of the styling. Also a known limitation and work in progress.\n\n- The rehydration logic has not yet been implemented, so we may run into issues when you rehydrate.\n\n- Only components which USE mergeStyles will have their css included. In Fabric, not all components have been converted from using SASS yet.\n","scripts":{"just":"npx just-scripts","build":"npx just-scripts build","clean":"npx just-scripts clean","code-style":"npx just-scripts code-style","start-test":"npx just-scripts jest-watch","update-api":"npx just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Office UI Fabric style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^1.1.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"6.0.0","@uifabric/tslint-rules":"^1.0.2","@uifabric/prettier-rules":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_6.19.4_1567599798128_0.8484237284448668","host":"s3://npm-registry-packages"}},"7.5.2":{"name":"@uifabric/merge-styles","version":"7.5.2","license":"MIT","_id":"@uifabric/merge-styles@7.5.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"78a0196d701b9e5444b2a51e2e55c780ce2d4967","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.5.2.tgz","fileCount":193,"integrity":"sha512-/YvYO45NSLpf85nxHaLVP4XrOC+yolSwrMewjcAyCNoTZcx70j4h69xSAWxCIijyebWndE5Yujklluby+8aAwA==","signatures":[{"sig":"MEUCIQDx7Dv4fxYEBjlV5Y4f04TpYxDqxe8zin9EOYulffxdRAIgL27jJ+mWovLHCzJtqDMXFXxjOZq78PPJDyzIU5+HxeY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1188658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdejsgCRA9TVsSAnZWagAATqMP/2Uuzq9h+S01x92DFCkb\nx2EQs6JrpqlixUGj2gTkmLD+an3+jDtOOU2Wb6sv3YcDC67fwMtrjfOOwLB9\nyeomHvOB9FNHYPum9sPXlXRGDKOs5FNegSkTr8KIHoHSbp44ac1cG2DQW510\nH52vQpg0yInUG3SfCaVHLtte3kBnhFE4rqqpakjiErbMT7JCKc4SUpJDpokh\nUkMtr5598eTMjoIlnnkE3wBB8WLUSd3pCCHnXFF8nT8EZFeUM+k2l7dPKBRo\nFRctFzAT8BqrvDR2zFj/IqgM8vP4izdG5D/Y6G+NZn/vUafSzg/mVhNejb2P\n2Ufd2OTAn+JFEhUitg/X1iXtLFttDXUiZTt18+QhJcjcGNJFu7e2g8CUZNKa\nCJkMqyD3f1INseNVO5KTVyLnt4WMGT5l/7FGvtWokJd+QckKQ1Pn3DiSaS/b\ntkVo3CbQ9YhVrEwBkrN51JP1GCLwQEt0VVWokTUcbUDu9MAXo7Fo3rxtcB9c\nXRfAp94Q0L7H/Hujdo/pJh8+p6qsnMOMMpgGGs5u/MKfGLU++UdLEVomELeK\njZD7OQTJPwwgXpqvKMW87ZQOdQtlzb/IQOIoXNJMnEVutp4Fnxq+/w/E5m87\nT3hZaqV2klsYrN7qAwEMIYIeyIf3WrNieoywjQ5tkG6Uo7ivJe+gFpS1OaqA\nXMNU\r\n=aES8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.5.2_1568291615577_0.7807149430557474","host":"s3://npm-registry-packages"}},"7.6.0":{"name":"@uifabric/merge-styles","version":"7.6.0","license":"MIT","_id":"@uifabric/merge-styles@7.6.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"7ac8a30547bbb298148fc7e7a7cf5ef34e583b57","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.6.0.tgz","fileCount":202,"integrity":"sha512-/AAoySm1rukcEj3M2rp80yqiYq6oAfbXkrS7Bu6jj7FsUsQL/mul/vq/xEqaRxAW9MUJ6RRmrqu20nWtaNV5bw==","signatures":[{"sig":"MEUCIQDh4NSgG26tR7j3b4BW1vrlFxZZF6FdrERHSe+6NPSgywIgCUhUpQXqrBvcyY/GJvTbU6T2fbdHUVErtrVyjE/zCKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1207533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhMcjCRA9TVsSAnZWagAAV8cP/1z8v3GITG2bVqwCObPk\nkMuyA/QCP7Sx8gk1uR5Yvg1ulFla5qBCmUaWodNunpNazDNABi6dHu2VCZQ+\nD7ArwV6c7h7u/19L4I+nxEBoKiBqvax8AiUTVHQ97a2KD2KO2Pj7aOoV7Z7x\nBTSxJB3dC+3i0SbsuKxbH74SjGGx2W520NYpyzmeQZ1dC/N7F7C+TiQbKiIf\nrfovTSHF/J0toWDXVlyzPkPlg46QI0mp+M9AR3CQUbyF3ZdmkX6YjdoO2B9/\niFbKyDahH7qee3V3GapOoRraiWGD4bZ+e7f4Wg4BYDmRaWEOIBAk16FTRpSv\nUQCQ3A7D4g7O0fzhgzT6lj1ce5BZMB7aeuhH3b5QiMFYt4ViyLtGBx8h3wUo\ncQNZtHsGSnL8hg4l38k+ygTycivZXsz7yyqwtJyoxjWuWTiXCB2UMGCmDhJ7\ni4cMA/5c+zTXmjfDfHiCo7EuSwTg4YFHciO2EmUpUxYgkr9vYTUSqZ2sCZBK\njQurym5skcDgQXjTi7l8e0QqUcsx7y87LjAIjwuCrlzSS9HL2B0KHYk8MyO7\nahRcSSrkPrXWddyaHVop42+yPn8NYEQ7G9WghzXZenbZabnezFOnqywzoNxx\nloN+Wb5AMsS/WmA3nJ33MRn1yNUjuKdXmdNLHf+v8euf7A8KwdZGyHSULwmN\nrvpk\r\n=jlK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.6.0_1568982817472_0.867638646100708","host":"s3://npm-registry-packages"}},"7.7.0":{"name":"@uifabric/merge-styles","version":"7.7.0","license":"MIT","_id":"@uifabric/merge-styles@7.7.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"10caa72dd5fb9c63e22214f3a53856aa049bdb10","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.7.0.tgz","fileCount":220,"integrity":"sha512-VMLSHKNp4dFDOZTdXeXhNvkrdmxjTwP4MaUf6yLeMkD1qf36/uFAN4nQ7jVAr6RC5cVMklmxN6FtNj+6+bHGfA==","signatures":[{"sig":"MEQCIFINrMmI1AVZA1OfCKkuhE1rBAiIQoW5j6QfKUWEEDrfAiBhZUjAV5siIuSyfauDiqBljvFsYxsvnw2n1MU4CpOLLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1263751,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjK+8CRA9TVsSAnZWagAANzkP/RozPD3ImVsELeFRG0uN\nUAWahtEM59/xruXFcD1a9Z4d1x1UYnoJj8MeUL7i/jsnnxcQiTMxdASMfsDx\nnCfWGpNZGoTdi/6i7IStPcvY/2cG4zHPNuwFHcUpBc2T6lGzdj8m0jg0UFtN\nuBDjmuBbL68K2HXxM6HhSDXeJb2KJKd9ouVgBrtpg+a4JxC2RROaxaw5VATY\nRM68F9d4Jf8Q2ragK+43F7Yl8C9tilBTsoLSh2Kwm3RdIQccYkJS8J3yhAte\nXrR538O+8qO0oWGh3E15I1YkK7mcrvfd7wyqMswuAgQSEHkOvvHSFawvxSnz\nq+tXVlQVt3bpNiA576evKZu9gqiSSfUilx9OUM7zBd+oITf9YLq8My663GDX\nwL6UnY7cn3ddC8mkt3le1herRXYh0UDeK6TP4vpFDEi9FhLdGA/1sZmVK+Qq\nwWLyBQ13jEMIRK3Gb32t+/0Roe8PAGVLWUyOWlZQfYBSzmQILy2Qq4Q7i4Gg\nsphS+8/M43EFD/iux0CYO3OIyx6SNfnWCIZRSklTcG3FpWwbZHLwjZulj4CP\nsb23io4SfN54QAFeKxZS8IDMvIigNEHsXzy9upJiIUAnxbUIjtsZpi9fZC4k\nGJDb+eh3xWngMWVUZR2vwzhKKOI7obUJ8elTbBYxjGKwuq7hWsnV4V0lND1P\n/xfg\r\n=BkhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.7.0_1569501115314_0.6453023234903199","host":"s3://npm-registry-packages"}},"7.8.0":{"name":"@uifabric/merge-styles","version":"7.8.0","license":"MIT","_id":"@uifabric/merge-styles@7.8.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"d3deb2e1fa8185480af4a9958590c2e677407f69","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.0.tgz","fileCount":220,"integrity":"sha512-NISbWaU7msRBNTuVglLRRyhAwnXaOUc+7xWoP5Y9m4npaAfbDl9OtgYp5pGeNr9o07kiuZ3Dqt5NHot3idtIlw==","signatures":[{"sig":"MEYCIQD9JLxc5fgds4p3H8XWeBMlghjwssERFta6XLSYxkMF/AIhAI8tELztVbMnMgHx+IwmJBFjHt+WfXFG3fd7tH4fskV9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1265421,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdraV6CRA9TVsSAnZWagAAXyAP/RK3fCa/bVFzTziEj4mQ\nibaeIkgeGtMiwMnBYLj4Nue46yQRJDt/QhcLFKljnArxdBAH+Hw0ZkktxCAD\nIu1ErD4pfv4SFTV6HhcO9NP8tLanSCTP7b0Ooy+k6aAqyt90fiiyaX3E/aKb\n8sxWZBpmfUeVyI/w7hbP3G5QiotEkhJfpI8AeezZ4mIq0eQxao5KnIvQPgrN\n7RXoH9PiCmhWRzJ7QJZdlAhdS/UOClhaH+vtMkJXU9pySgk+U9eBIcs2yS4q\nf/3Cl3Yd+NxQ5r+qxvhSDCbNu+0tTS/+R3Ni7XJCQyn9iE0XfW6ojF8xWcv9\ngpdKmlfKawp9NsODmFAtWGRm+qH9SODZj+Tsxv/RKLQbb+iaTQaPmuNA9gUU\nu2ggDcALYRkQ833J3S2tNjqTg0eYlljYl8rRRnagoW2R1bHjTAaY1LWqVW1f\nvWvgaBC7FbXEoPvDMaOIKgM2TNZSpXqZ4/JHvKtS02VLguXH8K4y0GFxOTA0\naMotu/CBEOMDz9OSStJJiLahDq6PyvM/Q8H+ATxMZdIRc0HKYtu1tYar3Yju\nqQh7GpntMH9X7QgMY+uMRTkS2a4oM6agJroCMHmjVNrtRKRLOCSe1rh9or7H\nSqUM1GXbFXqNm4bFJxZ6Uvk62s8cgPTJx/NHd2A0FNHhEhawTn7YzsPTfyq6\nwuuS\r\n=de0h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.9.0","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.0_1571661177058_0.4601051829761098","host":"s3://npm-registry-packages"}},"7.8.1":{"name":"@uifabric/merge-styles","version":"7.8.1","license":"MIT","_id":"@uifabric/merge-styles@7.8.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b3973eb6942bf5fd1653fb8c2ae349343bacd30d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.1.tgz","fileCount":220,"integrity":"sha512-DJBXNsYfrYQ3wCjOE197JqXTkqwfPlGJhQkhYMBwO76ovKBQyJxT8m6NL8og5F9blnIBdCJPrvRUz/21/WlUGg==","signatures":[{"sig":"MEUCIBZXe17k9pInDGaPO5qjokWQEletaBo/+t4nnSkcH9+0AiEA1tXS8n9bWhyasMhYK4pCbTmmozSbKp31+ePmtNFgtqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1265887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxV+4CRA9TVsSAnZWagAAiZkP/jfGRh+gEdNkd/6k2mBz\nk4ChBnKmv+PL8VMwQQBxrhMFCSQ2NSZ4kDxyNzH6Cxoa7RZLfbzK1luLouTq\nWGfsbR1ROnbyRBBZDer8K351C4HYXyTFpp2lihNhsX8ko8wEBocJBMaX8L12\nnIGMU0EhpGnBRLc1Few3PcqpOL9KkHrD22mfZGd+Jtvt+DuaZu0XkB9m878u\nshUfQaA1JaqocsBgYa8tONpbLyyMSkKpt2RmN0p3rRgS1LwVixqfKTCO7aS2\nQROJrVPmHlIwBU3Txdn93W1KX0+kGz5nN6zpCxL+63OA/7S/E4SzGDmZumSH\nnxZJvuGCLRHjfLNRhj7StDQVs/H3tl6UNoS7agXUf2b8TvytkvTtc8I56ezq\nqZUEpLTWyzMv1RvC/z7kLxJhCP0RUqtmTZWoD0mMJqnzHf8SDRYrrBuuDbeV\nF0T1xm091APyXmphhtTifZqrZE10mGRuS/0ChSkp5Pk/Hlpt47mqWECuRzIm\nuzqv+cg2ndFI23amX2SYVtj9EbmPBS1lvCoKEVwgwzG3zkmIylbQDPGMQSKg\nDrgArycq9iS/1r93e/tG34jllc088MKtfbhoOCT99pQ6sIhCmAiLLAUqYkpj\nxJGDJQt91uXhP6nQVDGm38UB1rvhcyADkHUoMR/VT5Ym2ONwUXq1LgMEQvkL\nSug1\r\n=Ruuf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","build":"just-scripts build","clean":"just-scripts clean","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.11.3","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.7.1","@uifabric/set-version":"^7.0.2"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.1_1573216184115_0.834040345192524","host":"s3://npm-registry-packages"}},"7.8.2":{"name":"@uifabric/merge-styles","version":"7.8.2","license":"MIT","_id":"@uifabric/merge-styles@7.8.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"3fb00da3dc5ce44701ba9a89566af5da309a2999","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.2.tgz","fileCount":220,"integrity":"sha512-CiGZkOQegNdrXIaVvgd8pumeHLm3odSRE21rsrA7HiqdyF+fh6ArQ0RWsKTlJRIQklCUJjMkXaO54QIWNOlQyg==","signatures":[{"sig":"MEYCIQCjll6MfV9F4+J3ftzf3XXRGOtjXPazMQeydJBIj4kS4AIhANl/xpDe9Nuwhw9Fj10GhcGG4XK00Kf7+agMNonunEfl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1267962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIRxXCRA9TVsSAnZWagAA1RUP/jU5tsA207PsUjwzrZ75\neUfcdvTF8A+213Epxw5ocYdxHhyj1AE1s+5xNRyibQfMfNWeXQgmerXOuv36\nPQia97NySniktHYDqSXBo//Lj4KQrq+EqKRKtkbdUIzn+FqSFERw2QyvPQHk\nCnl+zlgGlRr057pwpBL0p8kqHamSiE70Dvf7JXFgQo3D+SyoO2yOUZczB8cW\nBbqGFKlvxDhIIyzGcbxpSyv77qFzkdbbO2LKPnnu/TaU5/kQJvDt0sXRF5uB\n1wCNaYIPTkFlT1upxsShbifIPCKld5kYk4PoVuz1OAyn61qCXoUTF8WmI/Sd\n12HL+dB64lwku4HJR8biC2n4gRtGooR556E4aT9KFQYcRrE/YRJi7C+blEjr\n0fAz6srygth/4BGsHikjruDptlouZtBLfE8n4DRYN5BHQD+2uyvQ4rAcOuFs\nhhc2j5cbIuM4nZYP+Ry+wxz01q2cluRwWW2raWrSp1zJgpbVBHJ5PAKSBlkj\nMbowSvZEGkMqwClxupTxrCve33F7iEf10/KpsXutVc+Ef67nXfKBt3+oaqE7\nI+ELdvMolKBpl0h1ub7Kv4YverhE1Pm4AGMx0xvx4UQ7e62jqw/Yua5KVuDd\nc3MIl5tGj1mvM+1gZG7h06lbTeYd8f9b9pGqw+roC/4pU33w+I0zm2arVhyL\nMg0I\r\n=CJj/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.2_1579228247174_0.4473201616169502","host":"s3://npm-registry-packages"}},"7.8.3":{"name":"@uifabric/merge-styles","version":"7.8.3","license":"MIT","_id":"@uifabric/merge-styles@7.8.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"affb99342733791217474e3e7a7bd6d67c8e18c8","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.3.tgz","fileCount":220,"integrity":"sha512-mMLXIKmB7NH2ss6k7I4o7kE7Dy9+vcgubkxNVsgzBdV9vlDtnMDMc6/nZjOxgmBAr1UCRxCxERaKSB1oNFxtAg==","signatures":[{"sig":"MEQCICL5N7NrXeQ8dZf5instFI3xrnFVKnNoQRpN6nvA9tiWAiAFIo1+uGyYEbiJVM9Wo2qUUzh8dIJekPn8H5XmDIR7QQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1269184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKEETCRA9TVsSAnZWagAAcU4P/0Sj3VgVnJ/BvSBrVnCY\nNaD4q7hSpdqRtKYODbw1VOmXk+U2q+7dcFH+GJ7RzXLF4lx91VajZBn8G54T\nOd0h1hQrQzm34MANCb9syL0FB/D6YJkOkVkhVmyuZHUXMg0aD/YX3JM238uc\n2oF99/SkxvpsFsedoTLMlIZzYGYg4mKc0FOZTn13aYzmGIy6X+kcPf6xKts0\n6Qv5xiYsPJDwn0FTaogzEn0VC6ITTK41Cb5kjKbiEnMOuJppDB91x/17Hvge\nQHyAvQGL6I2pKXIrZeA8mV5YEqggUp/+WfjzZA3qBxAu61eK4v7F+0x+SWxb\nftdpMFfvntDQRClWqemFZPt6ny8gR2m+QNk6e9doRdRPVB+zo7MQjLn48CgR\ndl7wNlWtogMsc/uRlRyxLugcLRFD48L5UcHZOlhAyFRlq8JzigUfrUCROojN\n8bgI/GhRoWg1UHTHLzqaQ03qCBnetcTy5ogxaSj0uPgw0b+maIfqQ5FJ3FXR\n/aAKKNoPTvEW63HIXt5pbenyxPdAbcrGoFfg31vDzOohoBRT1v8h4rtoDcQk\nR37b0Oke+4Tg+IO8rfgFTY6jb5Ynpwk3wOsicfipGB7FAYCv8sPATOGJXlJj\nzs0V/5/3qw5+w2oZsKt2b+dFW+YPM0+aLAaVKA9yC9sPW51edr4meQ8zJmAy\nGUn7\r\n=f5yH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.3_1579696402908_0.4069638840547798","host":"s3://npm-registry-packages"}},"7.8.4":{"name":"@uifabric/merge-styles","version":"7.8.4","license":"MIT","_id":"@uifabric/merge-styles@7.8.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"0590ea2a9219d3e653b400175e15465ff60b6dd5","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.4.tgz","fileCount":221,"integrity":"sha512-tW4vjrsjWmg1GN1ulssFvdy1I98PA2iJgdHHI4YMKdRZh5aYyFwUt9n3uNq3hJCG8hHmTYOSajakN/0Tr2UeIg==","signatures":[{"sig":"MEUCIGpoBV4iaAjcag57sK65N/t0RSpKIfDaSGMxwFS8ed+uAiEA9lNP/JyDCtpL1IBM89QygAarKSDgw3+1p0sU5TK8IiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1269658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMCvyCRA9TVsSAnZWagAAD/wP/Rd8he9eoP8/b8cLlZ8+\nQUgOtHw6K5pRf5wNCOwmyM68EuqhnXaFAHN2rZNTdCuZ5RoGasPAiP4aRChi\nMDS0b8mgfdNaMUaB+1vGYmuI+VOGlKLQgSeNmHzY3oNd1HUhGMc9yX+MEv5p\nM6CCYkhbclVuS3KJU5vqwXZKKgBeCYRFjQFKVI/u1MwCICJD7b7s0+HjYJof\nd2bIS0ErEFNnOEI0IW3rgrjHxjjPh+GRwRZqqVprD1asy8XSfOyq86NgPEDh\nbQwJyZjaDo8bJ7iulMrWQNsk1jYOIesCCo5tXnJo0QQNYwTvOXJeQcOP8oQK\nGFoN1Y86n4MvA637x7v1vadSwusdXJmviffNUnNr1ihoLVh7UnkLSbaMqInV\nPlt/XL+Q2NDog3O+n+FLmrM/TgVkzpiniFggo2BNXV0nu58z9uKamo7OVJqu\nO9j9DI1M0/7xqFh11PP+SPFzNOqS9wCfsAKOWGcKkLYm2MLinRFeL6BjkG5b\n0slw5+oDqS77Pa1KB461szCSI1R2OW4y2NvnM6y/qCwZ7/MhuxuN7++gS3Jf\nRTmPwftOlAG2CegD7T30D/teOwblNDuz2Ri49XqCZfgsaPoVkZYA+T1jFAcl\n7eWQ6+kPVBHtNlX8vOfhCTtEuDNMETAUmBszXjJzr1tOJEuZv3ce+qYQHeVr\n5A1J\r\n=F60D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.3"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.5","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.4_1580215281590_0.11037953810708889","host":"s3://npm-registry-packages"}},"7.8.5":{"name":"@uifabric/merge-styles","version":"7.8.5","license":"MIT","_id":"@uifabric/merge-styles@7.8.5","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"e19fc9f17cc5934989c05f4bb06d80c7e898ccf6","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.5.tgz","fileCount":221,"integrity":"sha512-l5WSGPnleJCncpyfJ1f+qrrlOUxACkVu5gTaFx/v64nwMFD9nhIf9fpiogeKcqPYLhRk4Wn3dcaAh9ydu5vzyA==","signatures":[{"sig":"MEQCIEbnobmOytoD4/QMovMKOk6HmlRuY/shqwNGn0zu4NNBAiAvayHYYbZouYGSOYrgOSwhEJhoShHL5PyC8G8ybxVGWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1270265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNHitCRA9TVsSAnZWagAAEjUP/iguSuHZc1wqXfYXYSam\nvgcy6OLgTd0Xc6CvZhahfWtUlK7hwyQR9NcoldOpNyBGBIeCgNsyEDdV6Y/A\nSnUickBJO3ee2ILvikXnqmf2yXUfJQEqcZQvg9r7nCH4dpQxNdoDrj7U/lJ6\nznBuFj0o6HKDO6f+i44i54J1y1Tz++GkaKYlMiq1kLOHD9MDQTPFBkfQP9Nc\ndu0pHGioWdOwCtNb98mTE7YkD2mwGhFI8OtxhN4sFXphOUsJMcJ7g/WPJv9B\nu5X5CHr0NzQbKbftd/oD1vaN7FluKVIxt0EBD1fLfrLO8lnaEEeJ0CKCE1PU\n5VLs2jJWIN/o5l4+o4luQLPh3WGFwwhsqbeUj83sMexgwGT+N0GVLfQbk0aE\ns8eWWtZRCWIrIccQV6MBYHi2WV+15bOx29LROpCXHIjS7ODJ17X/dlexZSsb\nrAoZz0llcmqleksj2rHxF52+X/hDhxnqlB/3QNEeL+dPLegAonUDsYLSPqxZ\nInkvprx+e7syPu7iWBgSBanc8BvYUGedEqpqrDVaomkHVFE87JPkXyz8x2HS\n9fuVrQN0ad12UdHwB0q9gb1iCpgyhByIX/MsTG9TICqwsKrIIbvHNHsqRW77\nbC2i+XUlxr5jMyJmFt8Wg5xwbVVfP+XCpB+IlwUph0iNA1XjVKpZ5nXAhWGW\nV/qu\r\n=WXEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.4"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"23.0.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.6","@uifabric/prettier-rules":"^7.0.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.5_1580497066645_0.27139976589669845","host":"s3://npm-registry-packages"}},"7.8.6":{"name":"@uifabric/merge-styles","version":"7.8.6","license":"MIT","_id":"@uifabric/merge-styles@7.8.6","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"798f263de7ec5f509422607ed1fd76c06fb65ac2","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.6.tgz","fileCount":221,"integrity":"sha512-sT9z2dgxrEzdBi495RVkBbW8whpTalr8U16yPNxo9KLnSz1buIkKAE/+4661xOdso7qWcPysxmV2vmVpZMnc3g==","signatures":[{"sig":"MEUCIG+c8V6LVRCKz62wxQzPsQDyUvxh4R1atJbQnzeGyeViAiEAyrEyVMfR7ElrhvIsVsywNC6qlNA+JdqQfCi5QHwbwX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1270601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePVp8CRA9TVsSAnZWagAA3A8P/1+2fEY7Oxt+ge25gNiA\nfuYEyfh2khOn6qn9QRBoPk86Vc54Dph1R5uppkyXTUQ4ZZB1hoBZQwZ5HM1c\nla9x2JiKnbrfJtVB3sX68WnyxDWzmVIpbtHHPnduUc5LXEDV4ztVBbt68Kyq\nFvu9YvPaCGTD5REsmEuG69cobkSKfSds2FLxjRA1t1Ovj9SQrYI1bbZz74Qy\ndxo71/2dObQ5jZ2IUAjD0RwUdumW/chkSOXDMOIKIrV4wPCkkkOKNrQ8hyk2\nGJtxs+P+d4dJYWtu+ryQegYE//YQa2jbJZy/H8OaGJirqVuA/Q5mbsUHuM/y\n+5rjwPRx+1Lw4DPf+qHG4Bhcacrx1L/PmAGiwaDZvaavar3wrrEqec0tI5zZ\nHJVCXV1qpG6EW9OkGRCvB117tai5ggpq4NSWTM8M+DHuS8cz9OZuJVgwS/ou\nDe37tm2wsC/1nKSK9BNmqxjoxt53IWiBO37nNzC9t0Jk7azSBqTDfcgHkMV0\nKpL2XFCaUt12kAbaFbnMk/HXDw4+xIZF6t6R1mpr4OVWyRwEV5BBFrf9IWEA\nQZgEUjUBTEUs1yRPBrPpJtujp4Epatfcer75XgD/DVusbXaVJYif8v/FvVih\n4eFOB3YPPEEnE8J6JCpY+XKm/RHl6OSI2CyqcCWdXgVJWHbs6mdtBkqnrTi6\nhQM+\r\n=wqPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.5"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.0.6"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.6_1581079163689_0.2962527633602696","host":"s3://npm-registry-packages"}},"7.8.7":{"name":"@uifabric/merge-styles","version":"7.8.7","license":"MIT","_id":"@uifabric/merge-styles@7.8.7","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"4ed1300df4e0ac741f9e50df8a7bbce1b601f684","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.7.tgz","fileCount":221,"integrity":"sha512-edG667urzplL3annF1fGTzelziFOHM0eHoBvkE2nkaFsvHXxpyPeaQhr6r6N7me3DFbWOfWAHuii8Z3aoHxNrA==","signatures":[{"sig":"MEUCIB2pfjoK05YdsJ/lRJdn19xT34KewQFW97s/Y/fV6RAcAiEA3S8S+E+LBAO17GyjIWK280taq25wdOe4Xury7Z3CeJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1268012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYvtKCRA9TVsSAnZWagAAynsP/0EnYvOgZ1uHjndNnsVf\nd8Rj3D1fznVcTFiGdtiblAHKXnHY9wxs9JVYh5HmgjX3LAef70NpiUfQ5PJN\nwAxR4lnhH6myg1yhPjq29kM1DfSc25UWEekMLGPZA2zzvHg5GKh2WXUmV+VQ\nagD0LL+skiCVp+YJbLbQB8dG2CMBROSwZpUR0rn6Xas+ave2wOqxE2UatyCo\nA45+YDQKWjP/ymyNseheYhZmHxNWlLx/nQuyawhb/OudZw5+ayLExwfS8H6I\nlhaaCHx5ag/4MsHJMX4QdmHbxeAe4DQxfb5Te1Bn7azey3IWk1WmrCKWuMwG\nHp+nCoeQ0vEOsX7moEfGRYM9zozG/XPvSyumU6OvRoc+VNimOAFVCXfC8ifZ\n6CIKLSdvbi1YUvfen2OSN143oNa4all1/ptGZVzUer6826oMGH9YmQ+JrxYv\nn9kAQ2u9qBEZzlK8w2OBM6kF3KAnlOlVHvYiZndEJP6+mu+NACz1qSNUjnZW\nRJqkUgYM9ryUYkOX3Lx5JG9DYly6gLVRhnvIlpmiAXJPeS6NlJvIWILYUhWW\nTrklQ9eiA9QJD4jNvgRszVszydus2S5gLtjAtKTMzG08pzo601H3OSTs9GSu\n/hK/3ERFKppjxP1fCvQwTbT3I3ANVFtBE9MBNF9pH00kHsACTknq6RujBzMF\n/m+5\r\n=1w3q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.6"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.7_1583545161376_0.5316577076044164","host":"s3://npm-registry-packages"}},"7.8.8":{"name":"@uifabric/merge-styles","version":"7.8.8","license":"MIT","_id":"@uifabric/merge-styles@7.8.8","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/OfficeDev/office-ui-fabric-react#readme","bugs":{"url":"https://github.com/OfficeDev/office-ui-fabric-react/issues"},"dist":{"shasum":"b1270aa9a91602ed6ec2e61c1e5878cd9ec46d79","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.8.tgz","fileCount":221,"integrity":"sha512-8jsol90sFZ/mt69SsdxvQAYXBFDnmFtBVfFRn+jvtlaT7XdSDfV8GxFlouKMwpsZEYVDKuuUZXs78sTI92LhYg==","signatures":[{"sig":"MEUCIQDsIZFCEoEVOA5IPv/d2stRfCSjidRGU8netRcZ6H78NwIgBzIZI+Z8ZmwHV5vOPwKa2AShxxw37tik3XgbGlXdvC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1269656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec2U6CRA9TVsSAnZWagAAOc4QAIQQV1+fQxGAyD+j1+AZ\nbO9og4bgZsYsNgFFbOAlJ8gOWE06Lz8jlC2MJYmAh9dNJ7z7X7vxhnzAdajb\nsxB9AwltZyuaa6xHMUfCnYXA3HQtFdqYecXHZT/oic9q1uqyB+IvFfk7XM+j\nBc2YmZEMVrGuwDkxvYHBQI3fhvUvaALQVT8TT7bxfvFEnrerjVMAyJKCztz+\nKBczZ1MWRJ2jSqdmNEjguT4R/qSRyuaDr0sLusNKulHF59/7r5jb2N3b7zIa\n8xlGJuqUWjWetOv6uoRyS08wEMIbKoVKC/YF9ZkfaDfZFmwhNGads4qhO2M8\n7cn1QyE/41cqdCfAvLPFvY0YXV79oA6TDj1vDdFJ5Tkh4GCRTeSKhzmf92bx\nJ6caHdygxU3brOC6qu15c42bKkIP9IRyETHGx8P+y2ZHdflNQwBoXORM9Yde\nqLzntr6wAcdlNHe1NKmUNaJWRlLrjAB8vNFJ2h7lrrmhX8UEZ23fq4kGfBn3\nD3Cb4ROMeqnE8idqTO6lqNyRZKS3kQfNBnV9PVqxA8oGsUCcOsLHw50WApxy\n3DJ0N46ID6Mgkht29YI991nXUZN08l59Fx5ERmF+fiavoESG3Z5H+qB89heD\n80KM5rPK2hPwpa5pTK6SaZY5Bw8WftBB+lzt4/RSe4q2tdRBLsab1ozOFFNQ\nCqtp\r\n=f+/j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/OfficeDev/office-ui-fabric-react.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.7"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.8_1584620857602_0.5041692631481067","host":"s3://npm-registry-packages"}},"7.8.9":{"name":"@uifabric/merge-styles","version":"7.8.9","license":"MIT","_id":"@uifabric/merge-styles@7.8.9","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0abb3a0248c504f9643f544026fd7130b0239ed3","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.9.tgz","fileCount":221,"integrity":"sha512-k+Imlki6j0TnlwI4RV3+QAaC+hi7an834aZCTUwhUgb3BTf7SY9Vq3vpFybkrEgshO3Etj5tI2MM0JH0pretkg==","signatures":[{"sig":"MEUCICG5uJFC5VgPDW6ooRENkHLULSB7yUSSPFhbrgEU3MhoAiEAsRDMTJjkeRAbMcqzxVvCSGOzvrTWLqqFYAmiV0+ZWP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1270202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeKrpCRA9TVsSAnZWagAALvIP/igyJaYwoNpPzscOfHlS\nbQdgq1c/KaftZje5emoTKtcAvfVHh6yrfe/T4n872OsgZ7wTg5m36akDSkuc\nhRZYTvioZqoJbg7tp/C7Lhvl0jcFqDjqSb9NiFQqv0stGebJK5Ev2wUBUVtQ\nwxToSvyGJQddCUlTuFFJrBS4cUqU/QdsxmHIaYrYZrqBC+1QRa8yQmStutr1\n7yO8FRPunnP7QOoOu1+3uLe/SkihVinFI7+ScGDf+XkGjo87MmBT9XoBGVUG\ntDOcZayrEuYBA5jVvUtoVptyrWtnzSTe3eqGwYvdFh89tGDciXAGx2JqAEzR\n413rP++xpy/6Njow3JL6yrhgq0S8HLOHhYtmpjzPq4ZIne3r6KTn4A3h5zGj\nzZcaXEDa173eUKdZTKppI9U2SGzG2ajJuVEHr4XhS+SJNNiPeaoAM2BzKxvb\ndPEPLlDmCm/S6KZrmA/wM0V/Le60LvkIh5GSe9nIP5pZt7LXoeFlsTDMY5du\n5pMQqJn8/exOuTBu+vaiA91l157Ce/2wbYxplCpdqNMx4wf3wPBJt9i8aEaq\naiaE/GSCs9yOGP+3WBAEb+N7oj1IuXcaurXr8POwRNmZA+tKs/5fnSrk7ONL\nMWRoQ/E7sgrf8v8FBMwO/ETCn64pm9F5aYP6PdISbxbKpa53gi7xjN4iVB5Q\neS/o\r\n=V1Kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.8"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.9_1584966377465_0.0008114571499893142","host":"s3://npm-registry-packages"}},"7.8.10":{"name":"@uifabric/merge-styles","version":"7.8.10","license":"MIT","_id":"@uifabric/merge-styles@7.8.10","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b59c81504a899017fc4bdde3e9d502996adbdb74","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.10.tgz","fileCount":221,"integrity":"sha512-VQ2GE6YVL9IGAgd7ZGpDMpwjNy4Ls4Wlb+ijugDRCK/DKgl2mX2iSUGV+fsWgiHAt8O1LQP5mvggtMPNOroSTw==","signatures":[{"sig":"MEYCIQC7VjQ5N6GkZscSWgFCHZ8GL3FrSwAx4or3Gd3Vry2oGQIhAJgcXRy7GMEvJVJcriMfBMAjpj9S0rhVifaKaycdQgvW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1270728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee05BCRA9TVsSAnZWagAAtGkP/3scKgg3RfLKgUudPtRe\nNIxAaBIxnNS0ZsQ0M8jYaWAQuYFSRcPVIROqPiMzGtVkxfzKSxpRZNftrR/1\n7AYAxeIsE45nhxnoCF3OKfcFpO0VbiiFxE9q7KOfbpZbhTherx+C7rrKQfuW\ncrnmvMP9gPje09I85z/XyBJJC7kPEOMBybQRYkyY28jzL2fHc63D/05GbhTY\n0ellZZcWWlUH8+4MYSKDujF2rz/xbDs8kbhuD84co7XsL4eMRlIR7pyRBXSc\nIVRaH0Ss79a9qUjWI8/s/G2V/u046zpBRVgnaSP1WZP458Iiz0WueDxgy3/6\nD5p9J/vMLdZZ+LTYkWaq6hoX2ruRocSU4yie941OfnERpJwePmBazWmh0pYv\nviYHspu8aezey0NxSwie7DKrt3CJQFokLfnChHi3D17A5LcdR8dUIyUPhbzj\nPDRhVaJPi/0SULTK4r0+uGbL6i31SV1TKjJkZVk6eRnZWi0eUgB2EnzZ0uvc\naif/2qt3j6EsCxZi23+cDRs3uIpgdQT7y2EbsuMn5CqNcphqoiC0fHWoAjnB\n3O9RlSY6lBn/IeqDlYODJPH+QfyPVUtVonaEfhXRLOJhCx6kQLeniWcmUnlK\nwvRnszsPC3sYhmXZFP2/5jGEffU8MI4rN1OCzGkgJL6hb3lJtC0dbf5MATRi\nJg1Y\r\n=mGVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.9"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.10_1585139265246_0.04354285913988343","host":"s3://npm-registry-packages"}},"7.8.11":{"name":"@uifabric/merge-styles","version":"7.8.11","license":"MIT","_id":"@uifabric/merge-styles@7.8.11","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"450913c69b7c18ffeadb6a6dedc6a71468d3604d","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.8.11.tgz","fileCount":221,"integrity":"sha512-U1gYewj/j6ZGBSXD84Ekp+En4N5hH79TsK9hWJq2wKJKK3h0MKmY50WyFKWIL2/kS+wM7zIR6irK0xY+mfjB2g==","signatures":[{"sig":"MEUCIQDRyecGw/CPlSE47P9cG0AYfdSttNGpYeREnZpgtVQwlQIgRM0D3MKFE7SPSscZe2KqkSvkLBvPIvsfMwKs9qsPPKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1273754,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegkN7CRA9TVsSAnZWagAAIVgP/RpTg1MXH97A8QJ5TwIO\nhVN8nm3D1/nQLDdgWXhYANdQEU2yF8lDFhwH3N0si/m77Yuxj6s+Y/0imjEv\n20cN1COyvChhAnv5nsXhYVKFgEjpBOyMR8cJg32X9S/MTc195auwCazsB28S\nwXos8ZtBbq+blKojk6jgQxwbPm7eewh1vonuQs68sly0RsM1I2o/1iIVRgqD\nzpYh1Uvb7mCaBXZyqU33qwpXY7LoZTO3qlF3LAUbe0sW4J///LuMulIkEOxq\nRAp4AQr+0cVDjbYouXOIoMNyJHsYG1WJL2/2jYBMiy1VsHhkvqLAxyOJf3jM\n62NVqAWfyrXs0TiBzcs/B62mW1lXJ1zbWrkA4ELLzSDIJj5jGdvRozA74RiB\n8l7EmrYdBVqwlDNDlzYRJshI70UrsLmjNg1iyZeRIqN6lsIGZx7ziO0cZgyi\nTwRrNfnD1ZNr2gYn+8H3A/LM8aQ8N9WCThCrVTZVc9hIkzF+jddA42yfYLnb\nSB65EM7ip7zqqxHuCZQT+ISOpKk5EElVBTdAHIjj4PdWWqSQUXDb3V8IXgRA\ntU/vrTjRMOCfFDzr38PBcBdxYIEaFEQ7nG+clBfVtbMOdxOeVae+/jP89JVG\nZyLqchU2pGy05B16SSJIZA5du47ZOOBIzhMYd6CF5G3EdkNhPD7TEcn/JqC7\nReoh\r\n=knL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.9"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.8.11_1585595258708_0.35342840486826854","host":"s3://npm-registry-packages"}},"7.9.0":{"name":"@uifabric/merge-styles","version":"7.9.0","license":"MIT","_id":"@uifabric/merge-styles@7.9.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"9e50f6d4c947ccda3d8dcd72ec179e0b87f20a4b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.9.0.tgz","fileCount":221,"integrity":"sha512-lTRWNtkr46U0okAQBvJ202OIgb5GzEUj5Zq0An1lk7G41kGrCTjvwOs1HRoArOps8rymaVoqOZbx/Eaw7YU1RQ==","signatures":[{"sig":"MEQCIBS3v5eTiOnjpbGBBH6jw5JyX7ZldPr6ADX4nBKUOHZKAiBJb/LciT4Je08LJ8JJekqahLPPtdWWZgouOi5Hu6lOYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1279604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel6IGCRA9TVsSAnZWagAA90IP/0hms5mCmu43EyHp/1bi\nZfAm1W1fDBB/0iF+7oXIeOgVraEAw21ScJj7dPdkm+D/6AVuYlkCRvi+BnhB\nWyhI97ngPf7zFK6B25vjaABHBny/ZD4U8kqj5ZnhOtF9aZeBAvIRfKCUvIL6\nF9AzYxnNK8k4aL1+xhIpkqh/KOJBvEn2aU67ajtzOLQR0P/PX9NrHheVlWas\nN0birrPtzf+niitZrVCTEGheGfm4UN1rIuI7TKTkrHMzG1LYuKJ1AdyDktHr\nikp62l3c2O8PgAcoeoXjw9iW2sNB5j2xJ0KV9zRxX7Y3FVtVB4L4pN+2WfU/\n1QcYb0hp8iFZcx/pmHD7eTeh+E/ffvseeKiuljKkWVAzgItQ07l9bz7R90+d\nYFpgnCJnP5owpGJRm0dzJ7Seti050ld0HGnHDPABdMXl+XOmLrLL0I+NX145\nr6k+JNtagA/mebV5+q6ZqUKLqAeviHhugLvQvTrc+TZU6iX+hDA7++mP/++w\n38OxBeanN9fr0lXB7zWc2zp1066I2mSm4ErgyCnEYk0jA71qJLHDckHMISmG\nMxDCDCCEzD/TbY9ju6uUTSA785t9TdUKdqpiQSfvcqwsBpwxuBQXVE+plllT\nco2Tn988/v/cYD4mavPSnnSPD8EYnpWJPrJJXLv7VhHwn/NQ5QDHNTI4zVad\ncDTS\r\n=IsWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.10"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.9.0_1586995718093_0.43100255727612535","host":"s3://npm-registry-packages"}},"7.10.0":{"name":"@uifabric/merge-styles","version":"7.10.0","license":"MIT","_id":"@uifabric/merge-styles@7.10.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"270896d62c002a91d17c86793035e11dca94cf0a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.10.0.tgz","fileCount":221,"integrity":"sha512-woqgouz3HfirP6Ws6e34GvnXp+2KE0B4wBmNbw8zWpYQpuIoZSdvabNqsTmwLODc6w+O3UEA7e6rZFTzOWrBnw==","signatures":[{"sig":"MEUCIQDN730sYSywrxofOm/8FiYXGgNfc+wWV2IjsthOokCWbwIgTyjniRBOEileQnK2rQdmlXc4tol0kxfMHdmxmoQNG44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1279884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel9hECRA9TVsSAnZWagAAirMQAI3jf+9rLwHcHu6DLlEj\nQvZlzHZyuvEYkVGQyO+Ota3C4xMXE5EJn7zBxpkV3mF2hFQqpwK53g6WoyYm\nqMJsyrArd6tLxr5qZ63g+mkRq51YzT4D6XqQBGrahIT06jfe1S+WKtsNQ7TD\neUN+0tT1G4HN2VL5XMeryfRRA/mwYRkbPYKXypPhRFvwbtIGiQ5VcC/TMTeO\nBpq9V/Gk9Oft/d0TvPHcGB93BAS3l7QO4Uvf+/UrP+4HdtQzhTlehBZtuODd\ng/uFOKk4N6oitmN9etRpjX3CbT8bf+zNNGUFqq/X0lL0lS8oQcbC+ACiJhd9\npQVHIO3qaPeY5O2JdRYpJQVAljhLLwsYMS23fGJ3TxVFnxHGj+ROx7oXuV/j\nDRzGJop4JpLqWm8ICSYb7+noyGbvI4Hfkv8EDa3uk9VCmLy5CpTzIF8KoWFX\n+va61upFI1t7BPUTsO7yPj+QJplJlLnST/m3h9RjYuh4aSi4opvXiuAq+Do3\n9GoeIVN1XywCoRKdca8o53IPtjDqHcFS8ZuAd0VwB3e/aDRoPJGNe2edtzI0\n//phrrq5guhz60xSUlEqHqYkdYbqe5SlWz/C1gRPbJEOE488zZx1Undvqoj3\n4fE9QCFbdky1cIROSsVliBbm0d1KwlNxxevtlCT+thBf4tB3Zlv52s6c9SCX\nfvSL\r\n=nhoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.10"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.10.0_1587009603713_0.8471430928998767","host":"s3://npm-registry-packages"}},"7.11.0":{"name":"@uifabric/merge-styles","version":"7.11.0","license":"MIT","_id":"@uifabric/merge-styles@7.11.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"b330038cf3a5987d782fd3fb28c6d1a15aada87c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.11.0.tgz","fileCount":221,"integrity":"sha512-0T7A7TT+/hpUWQojUts1m1zSC1VBzaxDzOb5pZPho50nNhfrRHk3e/9Uhss933GxTG8/QWx/lOkyHbSAK/E2qA==","signatures":[{"sig":"MEUCIQCffDiYuwXKsp7guKonx6BY2TJ9Aq1K8YwEGckLLnlsRgIgdhqrwNiqCfPiyAJ/tZtC5UmL3MrW37FBpm2jf55YGZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemaGnCRA9TVsSAnZWagAADUoP+QCk/szDznSLs3m5ECLg\naJH9sw9fFx8Q171EGoDpSdSjvb8lAUWLN6Zc+txTY/fsGntDWdk6s00Go/pB\nEAuAq2N7SPWCVxLF3NNVu5kgdUMqt/+Su2grCOARcvfP2tCTx7iRjJYlQ9Si\nLJXsvhAKEgI+fObA2hgDdjMeTj+9XUN8cto1XscisB1s6XDoxY+9NRKYIw/v\nDVzdPpzFM+yMLfn3Q3cNSKivIgsArtBNjc++CtYXeh46elUvpa3cgfDEpiAm\n+sVImMOXCvgTiHkqiOsXtPBklTAGVLX4M4KMRGp1xJNE+r4f61Z+HQqAxV2h\nr/FwUOoXi4Jd6lJcTv/RLDxJtrl++pWiBmNU5zyhE53Xg23WzMtlFAasWtPh\n4hb3lvvwmecnD3Kvtrm2xONBFdIQZiCEfsGGtRDuM7Px8DxFQp4NLTVyw7z7\naQj47OxYZOnJ1ydzpqWvytMcyTs7iuC7PL7JTky/M00QFJnQU2CBjeICg1rM\n+x4oZ7kK35C2oEkKbblqvYu7cE4KHZXSiIEbwM2Hj2pfLkX69PVvyFn8eDmb\n93XS1MClokQAcE2g3j5uQnBwJ7WRyUE0wK7nE9Cj9YmXSszfxJeTzUw48tqp\nIwSdWaEFKAG1OBMmWd2n+pCF6pldliz626ewOzTEYjxc8Q+4DzCWOwZNA6Gx\nVX00\r\n=Kgi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.10"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.1.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.11.0_1587126694472_0.752644583164469","host":"s3://npm-registry-packages"}},"7.11.1":{"name":"@uifabric/merge-styles","version":"7.11.1","license":"MIT","_id":"@uifabric/merge-styles@7.11.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"7ed1a8a4ade85d8b652da4c26cc3d25646fd811c","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.11.1.tgz","fileCount":221,"integrity":"sha512-r3T+xOo36qr0lrA+RRN1Ie6eI6Uzo7Gf8AplFkIGeaNczC2m3k5xY+oUa1WmOc6yRCJdMnn18fTYljOXAV4Tpw==","signatures":[{"sig":"MEYCIQC3zGHbfJQ/jK3HW+FotL2gaw/JAyypKipW3ueaE5TedQIhALEQNDpMAhQuSiCNqxSqSxGn2WwY5hOJAMaf2x4RBRB5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1284379,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenueNCRA9TVsSAnZWagAAQnwQAJ7jx4R+5wWOQbnBZJLq\nNjAanjq+PjgfLMJmROUqRijBLpPSv9qaYtcaKuMCNXuzS1ZlTBIX8vb6dtLD\nmy8lauab2NSpifUoA4EjjxelRI4o3Mw0abxyz8szZ/SyOdlZ+BXU2dtawwrU\nG2jTbYxoAKl0kHou+ZaadBcAjVNu+SfXLhpcXeBZOJgDO2+5biYleTVLVv9+\nAbcPhZRvHBxlGFQ9FD1OcjYfuFhFL0zipQOrY3PLKULNfIIBHhn/AED7/SKG\nQDeY/WVvW0VJvsajz4EOsSHolrvzc7uSHDe7mZgTD5fsD/lK8tgiK3jgymFb\npo6gH4HsgYC4Y3huvFzX8vUaKU4IqeR0nfYqtrRoPq0bU+RGRL2NMeKj2DmQ\n1eizTIimFawGuIJ03qLx6ioEIuHyJ590FywCXRLYkgbJnbNYBdxvWA560fUI\nXaKeF9RPqOPg7DJxtRMbf+IIurZbW3LsSbiW0Wy9t3/D9C2wC8cCW+0ROCDA\n7bq7Ygw+bzSWiqRORpSpsW+aobOPsF7FwYqpwRvagtg75ReAocRftYAEgvHv\nrMtvAKlPzYVUYDenpeJ0IHoGneE5sE+aSAS7gigzxcjK5rKhvX+onM590l3Z\nxnMcu5GuuLOdyZ4NFwdL13sfHJpApqauQheZM42zpTN28O6jPw/R1pdtRUG6\npvA4\r\n=barG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.13.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.11.1_1587472268695_0.39116628674470344","host":"s3://npm-registry-packages"}},"7.11.2":{"name":"@uifabric/merge-styles","version":"7.11.2","license":"MIT","_id":"@uifabric/merge-styles@7.11.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"47c9b2d6b4c5b4af8b64a9602581908ef4df46d5","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.11.2.tgz","fileCount":221,"integrity":"sha512-6V2ydqm7wujzL6Nq3l9L8EvpjOWsPRfY52oK0a6JwfoTdVpuLF2ewlLaJW9w3mJSGyi+ZajAoSqwi11nmcm5eg==","signatures":[{"sig":"MEUCID/LGvRKGkwWuVPCTeKLvq5GdWpKBFVYgceZZUyd7nYBAiEAxLDVhrY3Xp9WmY7MQeqn0H10xTWGAj3J0mR2u/M2Etw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1285244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesVyOCRA9TVsSAnZWagAAaloP/A8wh4i0UgitNwts8C/z\nsjB0X4yaoUcJ6RzSTaLdfEgla2/HHLRTsTAExgT03hMRiWfOzwUNqoYPtkHg\nor7n1LiNGjH+QpFuHZZsJ0UXcOwp4Oucp/SFink16PMHbGVc5UxG3UcirtES\n4j8XMMTdhnbxeu/bVwjR5a9RciFOyWsCSbQIdfROTenHGfra89r4Zg8ejtXh\nD9Xdxw8GZrGr3eVqdQRAcud7RyO9pdmfeXbejw8PbQPOyZIR2ZqOnB4nOY3o\nmJKr7vrYCkpcWOmJBNNt4PGXYHGmsnfCMxVzLjyLsQ2ujOGDAmK9QGvgxf3+\nimhDT8Fj2gDca6PU4ytZdNUgkngVOY11w0DbppPyi5IoMyPkjOKBDOeIAA6M\nvh/H9zuSHjmcYMeglmRW2fWkFRi9bsvwpWK8ed0YYQE08AymhLHS5iQHyPhU\nvXacBNXbYVeEjTwNK09PfGuiwUOm5F5wjdovUsxYy8BeglCGUIIpYIis8j8q\neg/5xbB3Naq6j0E0Qxc1JPEQhrnMqDaXW/KKaVpg8+6vk8V8JSC/nmgQH2X7\nhn75yjnIYl5aFNVxWEUEGqSZFuke6trRGCdbSeJKCOz8z1d8ochvvvG+bfQI\n4AjSmm6nfWb93Yjk3jANByzN0N9u+X9i4J+9PSuv/BLBzYWo8skDyJczbEdA\nF/Pl\r\n=j2zd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.11.2_1588681870150_0.3542218554961232","host":"s3://npm-registry-packages"}},"7.11.3":{"name":"@uifabric/merge-styles","version":"7.11.3","license":"MIT","_id":"@uifabric/merge-styles@7.11.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3aea32d420a7c027d3653c94face01fa7d9e99e4","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.11.3.tgz","fileCount":221,"integrity":"sha512-e8SWVyPc8RMG8eqQE7ImTARr5tRYOvwyl1psd4XQpdihv9laB6mo+7TmWLp1YvvQyHk/Mx4NyCVuSzhGC+nsgA==","signatures":[{"sig":"MEUCIQCbcvq2whBbjpcd+CixW2JQcxIXfFTFN6wax+607yxO0wIgGwHefIfqHOOyK63grQMFyMpjeIjo3PSJMe9tgH9ticA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1286059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJes15TCRA9TVsSAnZWagAAsYgQAJsB/1eroMJOj3iVrzjk\nYU56/jLq7qIWbIA4CVlOvslelearlNUfpVd3+uKCapj5VfcUCq61BhPovcnl\nNnDQDLfQXjxCMQtLN97uFx2QpYsaTr1/YBloBdE31zHnW5aHynlJrVrf3z8S\nRv8bp8Vyxr6ZkA77edAUvLocr+0nwlo+A4bULbHFUcckxYgIAbsQX8rIeK3x\nUCKPCkLLQec/ZW/JmsFK6opwvqLqWB92C2q8btOxzZJX1JTVSmAw9CIS3IgS\nt9MIpI3tEkXpVVSwSbHfeIbEg1t4lzlC96bNy+zPq04B7PzZdAFoYTbV8rPX\nQYHD/DBv4R0t1YJBY2i0vWr9zZ3A++y/YCGiJ1IMniZ/KANuMA9q9uJt1tuU\nu1TUwzqGqp9abeRAJakjn298KaKxY839Ze6nDxaUN6D+EFZL6iQGAHrnFAcG\n0sVVJaoN9EP75ZKsAm3iCN9CvKCBqzeaxBUX8QahBn2tVGDdVFUrUF4hmSLB\ngskkeTWHG3WW5xE8gcMg2n6SLs6wRjvhKbIPBva6bcxkjMeFnBRsU2BucLmD\nNRMrxold3xhDsjOGtb6MqyhMS/Ym44HhNFveJ+FPhqCrs6ILavaKianqCV0x\neb0sOxdlHLL8IsfIywucfFdfweDD7ukR2XOp5Dtsyz0DaNXPje0FUhV+yiGV\nuwki\r\n=dL38\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.11"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.11.3_1588813395385_0.9681264945187209","host":"s3://npm-registry-packages"}},"7.11.4":{"name":"@uifabric/merge-styles","version":"7.11.4","license":"MIT","_id":"@uifabric/merge-styles@7.11.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"8118b9293a0e0db8ba25d255eb95c8ebcc44ddfa","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.11.4.tgz","fileCount":221,"integrity":"sha512-jUv9Pj7jLWvK88b/swGhMDLZWOqyq/HJ54e7UJuQdJeUYEUfGd/anpoJipmzmGdFm8owkkqUf99ZDSdaoj/O3A==","signatures":[{"sig":"MEYCIQDhuAd5B0ZgPAN/t5ErS9W5Cyq5BpCOHmENTnEbuPu8TgIhAMqDmqzR9dXiZmqcbTnSU7HOOXmTwRH4TE1I+bmal/m6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1290954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetVFMCRA9TVsSAnZWagAAkvsQAIjoIbndGG5JNMaD1XIP\nH/13gW2NI03AlGkRX9y+XYsTH2t7e9K/5MfIzj5n69t1Uk5mAeKg5COKZ4Am\nV228ysJTRiUnHXZQxKgp+G1aH+iSua6z69F7ceA9iLvvFHnVur/cKgmGaD3T\n1OXnoOcSetjjrMVrDI/d3g7BkCn1Ie+v+yNak5knsQCEvdfu++Yl79C9bdwa\nrXAd6WDQmnBAKrTUXF2aQa5H6y6aZsRwqOgQ8HbrA0gSn+SmXhFKaIfwHpUv\nfrfR/xp+ZXsEzpAgHLTrTUK/WYhSE1sdcllJQ1Ojopw80fK0tk3tO6WGn+yK\nyFozsQLtFCbiFYqaXnnpZlWuMlKIXZG/dzfkOA8u98Vk9FEOk9n8RKXXM/RV\nAkehB/NFPBsnRR4uvfJH0WKubtzHFl+/DWHW290ng10gVMFU/bD9TCBmLwly\nq+dvzqK9KcGGhCdqDAWkbQafZgQze33MD1bPHGrXpzpQ410F85BYIjgVbMVT\nBrL+wu2dz2TqsjvumEsfpXCHHNMnYb/ovXXJWTg1RMJb9hAaf6MJSvukd3fW\nuGmzIqmMRM/DuszDx3UagQEPhpgd5kq0jMOFeXIayualS5jB9jq21B3Wvcz2\nY7EojuKsrkXi8Ajr8ix1+AqRL0sQ4bqe47iRsAsGmnF5hIUd8flaG9QOtArz\nQn1q\r\n=+D78\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.12"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.11.4_1588941132398_0.9690320899607592","host":"s3://npm-registry-packages"}},"7.12.0":{"name":"@uifabric/merge-styles","version":"7.12.0","license":"MIT","_id":"@uifabric/merge-styles@7.12.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"47382a81ac694e0118a994204b40e6041f53bbce","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.12.0.tgz","fileCount":221,"integrity":"sha512-MQt2AqJJAn0boaGm9nBk4d7LntOCCiowgF35bK01WLD2fOymDKr7QberkqfzTzajPN/+9d+KQXguEBUUZd0deQ==","signatures":[{"sig":"MEQCIEkq0fGd3SywLIV1UJBTE8DWxnOFa9A+nnqNcqtSW8rMAiAhd98iMmY7sumPJZehd+c47gG2AbJPMo8fJ7gRwzuOug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1299413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuUXnCRA9TVsSAnZWagAAXvcQAJVzCPgn0TAWtfRn3ZDz\nkjdp2f8Os22kz/T9Emx7Nbi8xtSFpGAubxrA1JuVwB152qu4sQfQ/coAz82x\nk9n6VmSwfruR13mmitddwR2KpI/WQMEupHpEn1piZv+E0h+GWHj0kIuIe5Lo\n9JZpDIPvPUOJPkibCBnVzT3/TyATEUJ8pHqDn33KDNSh8hYnZhmWbYrfsJMJ\nQTLttMwrZKzbHdeKqgzGCKcW/MlZJwHwsW3+77PDzEl2iROtG2Kt4G5/h592\nh5HvGqtfCGBz9jpBxK+O8W8MUQUCo/kpCvPQiILRRAUtAJG4iYFz0pmOVW2J\n6vBeJx4DUmZca6+XHJ8iPqWXKKbmIHpmoZ/uek65MWpKj+Yc/Qgfd928O02a\nl5XbcDFB8UDq2KeD83Q2nM/Zyv8D5rddN0FYR7G3qhog0CHnEZzRTvNZQwLj\nca7g5OaUrLsGSkHfSqRwa+8IjvHUADLCQwnBt/jREJFu4seoJlrKlxbUiCMx\nRAV8BqOZCOoEHGGvRgy8M1PZbtPXrPd+qD0enjM08DbjtY2Jp+VjeElC3HUt\nRFXf8tgt7lt4Jhd/ZmKYVTr4BVRvO1CJIBqZqiow755bQdth2A1vjq7O+egL\n4NT457VVmxKQkbZgx0ApSQaDdSkWKEskBGYrz9humCK5M/YLYMIVA3hR5Szv\nCsmC\r\n=m9iF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.12"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.12.0_1589200358687_0.7532198561452621","host":"s3://npm-registry-packages"}},"7.13.0":{"name":"@uifabric/merge-styles","version":"7.13.0","license":"MIT","_id":"@uifabric/merge-styles@7.13.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"38f662fa77587acec4fac84cd4caf171e63a9cfc","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.13.0.tgz","fileCount":230,"integrity":"sha512-aMglSZUrLtDcto5TeQc8w1Tndy8e+BW2iGkB4KuYpQk+xjoNmB810Gw3llt3UKKIBwjLoQpY+muUFL74wBEc8g==","signatures":[{"sig":"MEQCIH3ijDIoT9Gp/UfpEQ2/WMkAYdezYv2UxjpaNUi4Jq+JAiAmp2H2Hre/gdRpzh+u14WaUP2Uqm1ngydQiRz2PlDO6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1287654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevdx6CRA9TVsSAnZWagAAIqgP/RetNq7OqefQpzqyUOJo\n90UzIwrPARMxNrWXM/5nA6iaX5OAH5An1mdH67+jH7PqHkJ9QpYWz20hVlz2\n689SBcQM2YKkEzTZn5DHX2LCNCKSFVpuXQcj889mSRQKhkVMUlVQhq2IVDV/\nLSXKMrFcMfeA38dhCv0Y22HRgVsKpc2M9a5lHYd7nRJ4yWEf9ROTw1JzrcMF\nBu8CIEm3MM/pCcM5miOXS2q/kSO7sBOs7R0Cax3cjYz3Upr/IFlsFZJmSPcJ\nJHlb5CClm6ksXGHQy2oGZHHBG67wwdTocsS4xDohqa0qbTvS2PCJ24ZDFRAu\n7SRwcezUN+0Z+SC2XwTKgAmpddgqazERDowdFgrT/S83d+6QEcOOeH2FrNM5\nOU7LbkX36iAaEIGUYn27FF0lvBMcO+peCHj+0iv9m/Rz16dpZRrUBHCfK4tH\nykrwoYceCnriuGvWv3cYzAdNkHfDtHzYyIN6czhpuBnVDvsL4lD7SySlOJ/T\nLKp1I6Bd6Yc+v4K2OFY4Lfdez0AJM916SbDO3R69A5VJWjiY9sTwWECS7OG7\nnMdQPsiuA3u2URuH0nGyzMhk3l3JG2k2FjKbCwGFMLAywciNsXMet03Wmc6a\nq5Kuu9opJULIzMGD/cjvejN+P+ckz54RgCiuA9eB07IsmTx59IRU3Ps22xI7\nWt+S\r\n=qpL+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.12"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.13.0_1589501049959_0.5269717035150558","host":"s3://npm-registry-packages"}},"7.14.0":{"name":"@uifabric/merge-styles","version":"7.14.0","license":"MIT","_id":"@uifabric/merge-styles@7.14.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"309c1d67ffba5824060544d2d6dd122258ff9c02","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.14.0.tgz","fileCount":239,"integrity":"sha512-LR70l856QTVYfceUA1HtHws0iFUQI3pN1Z2fyH2M1RPeBA35NimpaGkEaNSPHsCAiJ09evVsG6JP7iTUItWHUQ==","signatures":[{"sig":"MEQCIE8pw5sgx58BZjhVbcYjEXPj/Q4dgPOANiFQXfUTTdCYAiA3y4j3Q6YvNT7hXznZydO6mwhO+9qetH5yGVI3/+fnZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1292475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevvvLCRA9TVsSAnZWagAAoHkP/0mDpM+jwZ1S02CSNwND\nh24QssNMcnyPCiFJOB8SKNCrijjGqqu1/6mMpDqgW85xbnAt/v7XM99JkDGG\n+bRkun06fdNibyaY6o/og3UlCECkfYyhJm6VQ0hGzAeISRUF37S6ex86dn73\nKtbuMBnNSIoU0cUnSlfMACMA7MWllT3HkhJooQnfTvQfyoYJsuat6/N8DeZ8\nPlz2uXUHhdM96JXygbT1BIzfbQLwfuGyq5544ocpVhaTymTyjvIuXHgXOUTd\npkCkscavMPfE7k93/GUnoZu9onSwmWFOcGenGDFNLWOFNl3Gs+tmY/Fz08X4\nvml2l1vyTHnVwRDCdDuB/LQAs4qluPbdmiB2cn4hc0HpVNHeu/uXsAqwibdf\nkMeFdT0APRyr6KNIcPNarFhZhOHWdGfEHUmZsGkI7xhFcnITp9/9i01hjkcG\nda/lZCSIdl3qp0uzsART+N4k3DLq2FKV1i0a/S8FL84MSQizCKyPNnTInV5y\nOBOmJRjOj8IzWvgRmsXYSPRaDLNzN33UtmHMZzdf34dnATHE9CyA2AlX5gs0\n3IyP2Qb7szua5+s8E5AKh4+UX8TKVH/bIdca56g7wuyYuMHYh9kcit7KS4bR\n2OfKAEzbigd5pvENvBG5N/xYlKZUKUhvDQ7GQaW8A3BsgjxRddUdeu7ykcgH\ndFc6\r\n=6ECa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.12"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.14.0_1589574602845_0.12552575041437097","host":"s3://npm-registry-packages"}},"7.14.1":{"name":"@uifabric/merge-styles","version":"7.14.1","license":"MIT","_id":"@uifabric/merge-styles@7.14.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6e375b72909294b9e725dd19b8f7e3c76fe9bfe1","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.14.1.tgz","fileCount":239,"integrity":"sha512-nKkk0o9XyVh8HL174ZSDqw3IUnN2qb+kO73vg/rwioKPEQyuPGoEfij8jrb+CGpcCGnMYi53IeB1tm8ySlNatg==","signatures":[{"sig":"MEUCIDRY7GGxQUJtiLfs1o8M2Vg5nRqejv2H4qM7zjTr3J+NAiEA5i9SlrWVoe0icBIghMdFKBL3oua7YsHmPaVDuDZKKRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1292475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1kbkCRA9TVsSAnZWagAAFZIP/18tMvZbXlj63zXif8CN\nb0klAhLVkaaHq4mKjb3xkts33Gkf9Zbqnma/DoAd/mw0wOgkTe7tpaETTGAb\nd0WDWW6SvyE2RKBtnzsgqTjRqnZzGajFt0YyablZPYLMdulB/T6aAjGacVbC\n4CUw84gC8j0PQl/Hrnw0HijqrShhbhReDVDd6zwd+0+TsFp5L2ll/zA3WyrK\nsTb2fBgm+4dOtFn/FJ3Zi66bNLg5Z1NfdZ8fBhZiQS8mJ/1RN4wcKWPQgdQ8\nnRVz2KnKHgHh0IUKXS1U+39wPGibW1ux7Z4ptNk97Z8hdHzbSeoecfB5KPgI\nlhh43qJCAK28gj2c9I98qpZkU411fuiIczW6e0+8c9e8zTOVwnO4TXiN8Dtp\nLRDMk/TNScFiSDPHhIoNgnvQ/i81fJP4IThs27K3WRU0Y9TUKW2txezXydqO\nVHwcYn6PkXZIF+eCq4syBg+labpVAavOPrxZBO2fHsu09L2zjkzxjCQetVZK\nd6LQqbZfCG/AVvNrEPkoBnpcj/rBdJhWGiXccQ1e85Feoiy6h6EGeCQP6fh1\nSUhTygOvneOmNWllFu9Hqj101WAHspLxQvBZG00YToW0XfcpcH1hkpc9IjZx\nmaVpDz28Lb+mhyLD7IULXM9ftKz4m0WGC1ti30rk+hR924BT+XyaM8D+rYHv\nPXJE\r\n=fNWq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.13"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.14.1_1591101156027_0.4445024093010954","host":"s3://npm-registry-packages"}},"7.15.0":{"name":"@uifabric/merge-styles","version":"7.15.0","license":"MIT","_id":"@uifabric/merge-styles@7.15.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"595e948c9bdc5a162fb0531b1374237141adcf66","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.15.0.tgz","fileCount":239,"integrity":"sha512-dB2Pa0LSOmma+mZwpKEyc2l2WFUw3XfvXF599osuVfUAtgJHUYsCEOxJN2olt67apDYL2GYyMcBX5tlSId+rIQ==","signatures":[{"sig":"MEUCIQCggoUFBi6DBSk+tNk18tuyXOjq5w2DByzfrWgE3v2UkQIgQXRA93XQd0mtdpcC0g6VCEbOiUJZcKYZ3uwStrrg6Rw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9JyMCRA9TVsSAnZWagAAoVkP/0qIFSIF4Dzgmb3cizoQ\nx1M9KGOvydOYXz9zwMw2sT8JR9p54etmE4Zu5mQy+slDOEER4G0e3yhhrlHD\nO5VxCRuawreBJJ/mYM8lbDq7pMcoQFCuepyQqTMoIM6Wkuj228FdQH3Nqa7q\nqT+XW/4zjB3hAgKbf3TPz1jEob72CFQAfXtyDgrfLoeIRDnjwb8BTzlifcWJ\n655lukjkkAldgoyaV5FSo/zvZ8zSLgZWhINC2eD4Zhhv44oRWf/MhvHtPqDw\nE0yEwTr5iuO4r2pMazmh1f2FxC5nQ9sB/ltzOR21sDlAmjHc6BDaqXZtvekU\nyTEUf/kiKwLwPewrCSWE8c5cVj8EFt+qN0o7qRUpRslGVbIvEscEqe4+Ck/X\nBZQ+QmvsrsxkN7lV5mocT+D3gqZrHyJEoSJXXdT30KtnP/TpMrm+XOI+l6/U\nTCaEd3GjUqhVIrx17JWarEd0/T2/1v6tJpJiDG7e+md4BmwA0NHmT5ZPtkcB\n29CjlN92oOCIUrcU+CwmRkd+UO9daXLkh0o8vu8KpBrGizj784GEaOGvrrR7\n81rcJw4MCxkEJfcgpWKPjE8XLELHHIgu62sRif9ZVN+V4eaiHYAHwB7aQ6pQ\nBuGDWGiemB3Yp80t3tc9OjVKm9v3/uFM2BLxjLZO3lOE1DomLqE5zSUtU6t5\noyVh\r\n=AZky\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.14"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.15.0_1593089164078_0.7607220069919869","host":"s3://npm-registry-packages"}},"7.15.1":{"name":"@uifabric/merge-styles","version":"7.15.1","license":"MIT","_id":"@uifabric/merge-styles@7.15.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0e7627b3c07fe3737afa81f17111d995ecd446b5","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.15.1.tgz","fileCount":239,"integrity":"sha512-fkOsn9Ovbe+7BGsaz2zXnl1fEAInrMG8fQxjRuu9YXwXmzd9u8BzQvy/Mf1sNOZIbTLFYewwm2Swv2zlc1NRcg==","signatures":[{"sig":"MEQCIGomMcm+t5F+j6APUsRAsBOsPiVCkfUdbZlFxeUpS0ujAiAWJ/5D4L9FQ/GSD+3tc2dEUwycniENOo0+MIuyAyf5wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9erQCRA9TVsSAnZWagAAy6sP/RyGGjHN0JRCX1EMxiNN\nLptVjXFc7ayrsLLwtikfGwPq/MhyIObFVRErPXcCKjjkDlzGt2ozCsUQ2XBa\n8E5lAOIYMtl6NCtdHDO7AfEd0H0VyiW4fLIrCwgoxDl2cePzk/WLrLf98ydq\n49pXfn/0juQOMIH26ToheG8/aEo4Faya55C92CwGF/eA4eoI3jjEoT1DN/34\nDbvVumoD/3uGtF48VT/bPjW7CkIUmTAn09PpyDvLorobB4QE2eecMdHJvGKC\nHbpJ7TgJAui6/7cW1Vwdqm2ccuy+wwLbyNbPvWQRY7jY2VVn2W0jN1Wnk5ZQ\nHUTJuBDeRNfCqwmmW0HbGzp1QZxUaFPoHBn4Bwd8AKHhUYkO2oR44ym509JU\nE1HDZwOETm9aTz7Ye7VFURCVLGO4vLCEjgRXgUEp2wTognncLXQS1B744Vgc\nhb3a3/fv2B3sQCdd6skAkN7jZWIE9MZKPKgTh09m0QyRBGsxjruWAFLhGc8S\n4bgPujkLitn1VmLgfBulEY6cl9sGYgW7adLlZl5mMeaG35L/p66GUGztxBAp\nTIjjyJ8VnXqeVgJWcc3xD20Y4FalziWIF05nqysPE15wzun5G/mcWe3TIbHG\nnJWij9hbO+wrlWN1inSBe9HpM9uwR+cwZu5HD/bKUaU8jZLELzFB5GCfU3iL\no7cy\r\n=ekSu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.15"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.15.1_1593174736040_0.5221792084045931","host":"s3://npm-registry-packages"}},"7.16.0":{"name":"@uifabric/merge-styles","version":"7.16.0","license":"MIT","_id":"@uifabric/merge-styles@7.16.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"6678fe13d5279d301ad5c73ee1acdd1b733ac5ee","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.0.tgz","fileCount":239,"integrity":"sha512-ZVTki5hvPijpzD8snXAcc/aTSFn1vVDnPMgnr1jkuVvfIohLEaU6dvoefnYPFJ/KnRC5rHyb9Eb5HS9uLnTZ8A==","signatures":[{"sig":"MEYCIQDkPCmZ8YgT1Mq63NuI9ME/cw2EOwF2QIzbjHqEc8EglAIhAKnjTQgkbe0QuHGNnaTLdwhlUiHDflH4E7PFU27OeCtf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1297908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+zBMCRA9TVsSAnZWagAAqTgQAJW9ZdRCAC59ooaFkmFP\nO+NHTKDpkmoRP57OFLQDNmtSVfBRdskgAkc9lPftdvo0s1gJtl7y9He7jLXT\nH7yQBIpKZzTxUkrQ0xEhNRYYMk4yh0USt3OvSHhLIo2s6DuNKEQIO8bxgHFn\n722gKKfsYjhc3imOxtBzKIDtGN6pcBm7cnPqTXQyRPtGXKBPAMpwGMDo0TRa\n6I/RuI5VQt4LspgBMwbMQV68D/VUnLkjCosBVbwc1xThSdAaJEVLHM7FktBO\nhU1bDfqoY3c9GBPMyk95KfucyfUl4uxoyVlJBAncROLKQJ96n/Z2SFRTzpHt\n6dnSj+4UYWM8f+bhRc5LduVyre796tZ8TS2kxsWVgwUqelZxTJXglTC9vM3I\ngPUSJjeY3YZROzdlklTwSL8PD7fQ7Fl+22zWgmu9oPYqywfO56HyTx1u4v3I\nT9Mm4LRwnF6/MRC2iaTZ203174gDESh+dAG8lPPxWnWjjzTSYMHvwoBBNCUL\nTxpjahTO+93uQgGhgzf+dGJIW6hhPOUkVrNUgVubu5Qdb6TinlLGaXm35PE8\n+nb17ns35ZLvRex3uacaQv++mlKrAlRvzPLmQNMHT8jsIKYIBDekhOO45KbU\ntz1C+UIQ4jP1mGm95ittsMd+YVz4we294L1wiyDEqqM/lto7h885bGGeczgd\nKVEC\r\n=X0a8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.15"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@uifabric/tslint-rules":"^7.2.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.0_1593520203997_0.318725015749757","host":"s3://npm-registry-packages"}},"7.16.1":{"name":"@uifabric/merge-styles","version":"7.16.1","license":"MIT","_id":"@uifabric/merge-styles@7.16.1","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e940a5a82a8028d177caf7ca1109a981a4788248","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.1.tgz","fileCount":239,"integrity":"sha512-7Dja+oGGwI96pFsWo4Pt3ivP2DjBvXkb1cOaLZDZDFj9HAwAr8RvJyMEYpTTSo8SamdB37ZTlvt7611OLLZrAg==","signatures":[{"sig":"MEYCIQCTXLBFn9JLKzcISWPL7aOb2MBmUuw4/u7lgosNbWs7EgIhAI2+pSqcbfVuABkVQMWGlDyxKXHqr+7O965a9driG1Ih","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDOn4CRA9TVsSAnZWagAAu4sP/3IaBIA1XzbxIj1v4pHe\nBsveQHlVONDCZ/NKtD/VEqEPTFjSWheQLE1KpANnGushsfRD4SNTp6J6dZqx\nsPWoNv7fZv2Ug9YZmUt0c+NUSSbhziuDGgGIw+Nu50hPV5jwgOlZq5Bsymzk\nXHqhgvAuYASuFtslvwhjfRs86z8kRSe+ipgRZ4MOi+wwAto/+E0isIJpOyCA\nAg0g0UB/SsLO18jR+wk1MY4CItY5KWOPX7gUyAsHAOFMNYZy78ad1q5ghaL2\ntq7onsjOD+AgT1Ahmmq7TX7cMnZugwSdFs2m1osDyxniImfKp9LdY9QRQaCk\nbgGTxAz9D+Nx2G5WHjqaI6wDrkdIjWEaYzuYDaGErg4STPFd/5ZvHTM9rVFC\nAzlI7WxbM8AM2i210WwhwNlh5NjG8lHAhDEknsnHgKcT7COanJYdZmYbFQ02\nS140b8w2UJJseb3HsCSBwyTeyP50h43rtyiOY4X5o9ZD1sXqRupxMLij0DYx\n0tDuMT0bQpJKxGahp7TfjeQwZyHqeP9/+bSJ71OsI0Qg2x2V54igZVhOsQRW\n3g8NI607JZ3s02D3FnXFZc4E/ZVW1Mo53+dZJ/WkJaSRSpQcQd9/y8hl175W\nahLEqubvw7YlFAQe73lzAWZJmQLOpeqEQs1bMKgcngxBc07/b6Cyle0gT38e\naBo3\r\n=Pbms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.16"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.52.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.1_1594681847937_0.8838682050473199","host":"s3://npm-registry-packages"}},"7.16.2":{"name":"@uifabric/merge-styles","version":"7.16.2","license":"MIT","_id":"@uifabric/merge-styles@7.16.2","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"0d76cf50f3a9eb64e374f938112d51efb454912e","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.2.tgz","fileCount":239,"integrity":"sha512-Xcmzne0IzoRYShFyHL8rdJCplChdPHcD6NZWPWcbBI674K6+6twVrQh5l4KWSuAVb4M26hB5NU3AIi7ne2Tiyg==","signatures":[{"sig":"MEUCIA9vaVhoKlUl+HCZoFjO7AhTko7FFNf5PVNRXdirsfUmAiEAjgpJ+ulOfmC0bNzMA6uJ8Jpyaxtz0+mh4Scr2EygPZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDviBCRA9TVsSAnZWagAAc/UP/3ZtQ2Xc8vTgpUh9+eGW\nF2xyP9RMKc49UDqVxDzcWWCf9BXSMwp31W3m9tWdv5kGC/KUA6fJ7JQ8KKwy\ny5PaMQ0qhKOU167sAzoiMyRygRflc1yjSaOMPMw9WNSu/bJgng0AS3e/AHCB\nQ0J/ZCH4GfKLvFJuK3dgUVqEPnMtOolNnK29YZT1j6cMDyhEIRgd4nh/HGng\n3j2Fk1UDe9DpDTbQHE8Zzszj3M5YyBaz2clbzSU3yN59m+m5/p+nbyMoKR0v\nd2RHSkzsY9wXkgyEtLloCtoEPhPwGZ5p5yqj10cMN7yLXZypFQL7Q+OUs5IH\nyxVp47ygGOjPjUqNrrp+yNPdw0RTUTTDfC8s4oN9SakURdt4n6DQGdvT3DNV\no8OFXbn8sbJkKbsCVkSf/kxaHx4XoOmeV+7fnoHm9JPv2aamQ3uJNqZLhkzT\n7AS/0TlrSZjRh/CS9bCaKT2TPioLL+gWmcZ4yYko1QYD03XibFNTxi4Eqjju\nkNXe437xP6isIn1i42xhb815Nl43WNtpqe48w83qulubCKiF9bXnzhfOPHGA\nP7AXav1CU5J3AcijblhHTvuFyg4NrBTyFxpZg4/WLIa6j0D1Nd4zdae+12FK\nWHUzaOzMekq0U8Uz2GfCN3Afj+7q+Ex55axLx4kHECuN6vNS/2KnAsr8htia\nS8Gl\r\n=L7U+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.17"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.53.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.2_1594816641004_0.08511690071671119","host":"s3://npm-registry-packages"}},"7.16.3":{"name":"@uifabric/merge-styles","version":"7.16.3","license":"MIT","_id":"@uifabric/merge-styles@7.16.3","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"4e55748a7991bbb419240d828c3e18afb4bb4df1","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.3.tgz","fileCount":239,"integrity":"sha512-MmLPDRVbFENixb77K041y9VlSohcULbYXHlolYedNW+KCr1tyu700GunnBwOnWRhKOoKgStvBZZdy5X7ty41xQ==","signatures":[{"sig":"MEQCIBVl4/lRZkKJfqn02vEKjtref1tgJvfcGROP5btMzrM/AiAZRoFHn+hwWH7lfIgwJYws6SRsBt3f44Sukd0Cys8frA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295154,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFuHfCRA9TVsSAnZWagAASy8P+wU2EdtfWZ5GlEFKImk+\nFhS14MKzXfjr0Y496gILORV9+/odmM/MHwdTM/jcuiFSkmjAc1uL99gvbzSL\n6HjQ4Mn04ul9R6QjOEOciyWSyAowZzCZ9EWTbp2yOsSAEA/+lylIFUGmQMCO\n0Mo2eGjL1mNSDAbWftb0rV3Lkz7eQb0vcmbtzsehWCuiRWCft9YHqEyNHtXZ\nCjTgDh12B8skLpbv3eSpdSmZkvIrWDKM671UmLofuEaBH5YnkdMBc7/gex0B\nbcOcPF0jFNC03qx3hPUCOxsFmeYdrvwSnGXZ56Y8Zluc5Fkg5csC8fQAYE9x\nCDMaZUFGcnqIF7Oh1WrUl/prOxXDAHwNBSvVs0zKUt9KDeAGHgJKgEoPTNKW\nUFje+X0+atZcV6cKbjVA8Q0zuuE7/thL5OZU/ZUvWvH6Piqf8t4SFUut1iok\nbSUaX9MADOB/Ekqiz17Onlts67gh9whzkdZl/yoEuYnRufTepcCXc2L/ZYez\nr14gVOOD9IknpO4b/3K0i26Ir96rSzCy0nTKLb5tdOMwz7wRnQxycjnBnS+4\ncFIhWkUoVuWdJrodlBXzfUntNiOUI4Wc931RDjjBHUcCXMguAX/3iLZy1mLH\nnw7f35zOPBjQgE3JLXeMDUTxvBaE1G1U9EbeNVsSlAIsN2AWFOM2Hke9KOIG\nddQA\r\n=VAZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.18"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.53.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.3_1595335135001_0.843813024317813","host":"s3://npm-registry-packages"}},"7.16.4":{"name":"@uifabric/merge-styles","version":"7.16.4","license":"MIT","_id":"@uifabric/merge-styles@7.16.4","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e6ba783db3819a7b2f5384283fe81434ef7826a9","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.4.tgz","fileCount":239,"integrity":"sha512-OhOEtwYD74AARf4VZQJPan97QEvtTYcxBGVQfdE7YxFnvR1VdfMxOsV+9CAjAIFM+Xu5ibeKkEE/ZmJYnHkqsQ==","signatures":[{"sig":"MEQCICEQBJhG5+Mi5QJIfT05LzqsLSlQxl6HqCQwoSeOu9tJAiA8NJoD4mn3w1rmuNmY0EN3fiDfk/f55RP8XzvRSwBxSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKAXTCRA9TVsSAnZWagAAvrUP/jxfkyOsxGxGwEUnzi8m\nryyDBq0Eb6TEKusG3Ct+wXfkeo5snSlSO5VSPfYdFXMyP5yTwtDPDFJd6OYp\npa+Rkb5NjZ79LLLrvJ3uL5BDmAKZ86ody+hllT2Q1k8q9hcIh2B8atoJYPK5\nRQorybAdhAnQBk91j2vBc2N8UkyJRubSkOrBHsZyZ3vK/LwmiUEwf/oKDN7V\ndH8FU1ktmNaJf4sUCoxOzEuS1aOmwxxUGetxI5xeZRtqwCjtOAjQdRLJTbNP\ncEJ3H5GF4EW0KaZwmQtCizf+IB/zcNCfTeeyHFpPk6AYPimgVoVOkYjCsjJ9\nBvNwXJu+vzzxlSRplXIsJM64gbDI19S3Ha4t2uWTpysUZJdU5okJ0wFoFKdC\njUIDVxJB4zGjjjW5O41qNiVBxLspR/MJPM+8bsvR/MM5R5jDrv4mmXFIct+L\nX3yRKyiuRu5h6elfOvO6tjMiEl+1pWjbDHf0xm5AbpUO1csZVZ/kk8EsusH0\nZvdsNnmtZQGQdYkSm8yW2eCUfWQwfH3Af1Nx8Pxij0FFe4ZDZCz4eosbkoRc\n1jaLtFbXFLbekAtugB/noN0uHXbfawwiRJkkxix02isXlApVQqIZR3uHvYrr\npcc4FCCozWOvQy80XXstgXsE5Paz2bEHpupiJhO54lKYScU86uApZ7W/NDn3\nj55/\r\n=udJI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.19"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.53.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.4_1596458451407_0.00329050454462676","host":"s3://npm-registry-packages"}},"7.16.5":{"name":"@uifabric/merge-styles","version":"7.16.5","license":"MIT","_id":"@uifabric/merge-styles@7.16.5","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"2625cba7df3a4e0774e7966078ef2268529a1794","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.5.tgz","fileCount":239,"integrity":"sha512-8HpeF4ROz98b5lEB2AQp0rZE93AWAlvB2GqPSIdb3eAQLbpmcd2x0Byu0W1rdjDvrTGzKfA/vn7yjBSlye+Cnw==","signatures":[{"sig":"MEYCIQDDh3ycGknDqalzf0ttOdG0UWvBjEWSt+uXpijHc6BVyQIhAOmgXptM/mFxJgPXpgDOfjuqPXr3mRmw0TTmBynjBtSC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMOW9CRA9TVsSAnZWagAAqOQP/0GIbhJPT/91izdLI6EM\n0+bNLeE/2EPquanV15GZOBI+cUQkaNZi7WFma2y/PA6yg1NEpPrvTov2shvf\nBTDtdrBtRTsTxV52xGbvvYLIVtCRBTQfKMNORo5gt7I47g60CxZrFEBLuMWL\nI4EN4jzdFn7m1htbjYiXKBVKmwfMrCYIqU5KJr21Flg9bakPnpzTmWT18QpL\nUiZXOhN2awHQFWswaTMdcTlGlQAsHXhstknoPZy8fmh7GQiB7f59UKEf9p2o\n6dt+3HIhlFYseD778mem9GjVuRbhAI/tMLmc9jdQY8yT78/GDGSMmI1hBWWO\nE3Zjl/fBQnqhEXJyco7yJter/ZYcy8xFvbCVhq7lzPR+bH81ulfSa8Ucvdrz\nk1d4wSjd1GT7y1e7ZbyjrS7uR3Gt6T+Wxs2Kbi9guCr+G9oFUNFOHyRQBTV7\n0oX5y21CW7qSJ7S4RDMmp5NcnAZ4WF46Re+pG7KWLlwheMlKNVp3KubbOygh\nlla7ad2ogiYfzcLnbaYwTapQHqLSFgUkDZMlN8E1WDKCtYox7XSlhRR9h6Ue\nNDtSuU8c8QiHx02PlJtYZYdYIyHeAsQdGFwM3txALpd9rz4TUxiBOS+BX2KX\nVEW0c8i7tkp6lCv7grNCEWOqAyLx0HMEA2x0PjcnICeiUBfIVjXQc+gxIHnG\nmIKi\r\n=eWEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.20"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.53.3"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.5_1597040060910_0.3289147088016291","host":"s3://npm-registry-packages"}},"7.16.6":{"name":"@uifabric/merge-styles","version":"7.16.6","license":"MIT","_id":"@uifabric/merge-styles@7.16.6","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"3f5bb24ed6a162b4000e98025d7ed23740f984b0","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.6.tgz","fileCount":239,"integrity":"sha512-j13vg8RIQZi9+mSUAO6k26X9wH+OdRy91CQe4qbtmq3weYJp4m/x0qpcdsHturqei2IKuPWLIcArEWCzIKgmmw==","signatures":[{"sig":"MEQCIDIch+f1Ezs59jNDERl/wczDeqf7lQWTAbZXcg/bcIsWAiBjPSYb+jxFWTN11DWacsWjfN0xk1sDsQvDlDcheryTvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNTPXCRA9TVsSAnZWagAA4WMP/iQYbuCbCmKJYVtONHJZ\nYMBx1x4zA0nLaEAC+wAjxZ1VIaMvkq3O0LBQL54eNVyeHtsbn0gQpydLtCqa\n1yFXtT/Nd/LLerf2/ovUHMMRlVCzVetYU7TgJyGbZuWN0bIpt5Qu0mqYMoKX\nzljeqsjAIT8M56y6S5Uj9unXV151nMpTtAqRbGj5vtC2KyrFAmE3gvkpEs56\nlF1rSvidAoGrW7DnIBhGi1RbesBhtpLjZBT63heffH4KsXSbZXdHBX1MAE/k\ndw6uZs6qMigvHVSavzSlo2xJxaKqkwEQRSsI80M9dfHfqguDzD11UlPX9o4v\nj3hYoBLqUN0FG8RMhboW4LQdxp3EQuZOwFH8KIuWkGn3RQaI8Rj6prY27ZCo\noJJLhb0a/m/Yug/6pdXGtrJWYELPRJTEJiVvjp2TwJbu8prRmfyyJK2dv9aG\nAEjWI+deKXHtsPa3jeqjJp4eLw1b8Xv+nh4+pnQLvIbaZbWMbOKl5fFAJtpT\nT9h2Vi11ByPBKM7dmB9Si/olt0FZz2m/lNHUvDKLVCjgdVHw1uMswA3Ky/Zj\naZ3fDMEGa1bsbG6uFBojkU1jJLPmFxXrQqdtg2EheSn+KVCIKBoIeBJFztcn\nfJyCzL5OYcFh6K8WnGw/H8CVN/+vW6E1Ax2QFYbQRvR4nV4oFBAjmsxGvV2s\n4O5t\r\n=5Fw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.21"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.53.4"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.6_1597322198720_0.9093924065332528","host":"s3://npm-registry-packages"}},"7.16.7":{"name":"@uifabric/merge-styles","version":"7.16.7","license":"MIT","_id":"@uifabric/merge-styles@7.16.7","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"f75cf66dc1d7b5ba2c831915c7cc98c6c20d122b","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.16.7.tgz","fileCount":239,"integrity":"sha512-yOjCexa1/I6c7p4lsgKGWbzoljVidg4IxigbeLjcvACvTdOFoLXguxWBIXn31Ralo28Ih4GC6ykhUTBGfsNTXg==","signatures":[{"sig":"MEUCIQDhqOVYF50xjLOQq60AdYyX5kntjeWcftUudyQ+bjcIIgIgeSqTKPavQTEkRks6NLqZ9XWpxOVejgSx6OoCYSiMUDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1295152,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPm1iCRA9TVsSAnZWagAAsCsP/2eBhC4AEXqu5ehDT/Hh\nfoGTMzDPTGt1P0nvV4Z44fpLqYp0rj6P5T8hs5Oza8AlhQhlSmFlJyMiQyRm\nvh0o9CNAYSRRP/o0XXOsJeYC8xjoy64rII53lJQu0DgNQd3j2bMh224MWIYF\nYPB3jLeOS1Z0AIot8/kGcBMl8+pOHYRSwuT764+E+eEgExvnbCCo9QLqP41n\n2pjby6Oz1SwphqMBTifXOOTITnLBKhXSd2Q8tM63gz5W3RPXiqzaMHu8A1lN\nn4WvShbt+ITYWlCfrTQtnshvm20fN4ZrzDv7HGxKkpFJJqKWZPILeQ346a+T\nMebCPzLl4UgwLmb1ddbrtzgK1ocbAHb1GQUiD8Wwb+2vRaNWOi2NeroVoY57\nH+rLqmcUlegFBYE1160GuHRpfDLUm6rU1SE7Dg8D57vPhSUf1JbfwPQEiGbS\n3blzNJLuJ9Bw3dZng/Hc5gwj18Payggp1EbZ4Vyd21dAb7QrQ0QoLNKT3rQe\nAD+z5fw/bECqUr5JI6TDL7RSKCakxJWWnaMXU64/qrJN4eetHPKkGZOmprsz\nrqzGnFgU9ETyiyQG8oX4AJUc6+AHUxYJQY2Idb9AzOifH64wh0/Qh6IWTbs3\nakbUCsvM5/ICursxHGLYCN3da5AV46CrNyjuZ4nq2hQ8vThvvwRP2lb7cqAM\n1jcU\r\n=ZfIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.22"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.16.7_1597926753725_0.9561504106961223","host":"s3://npm-registry-packages"}},"7.17.0":{"name":"@uifabric/merge-styles","version":"7.17.0","license":"MIT","_id":"@uifabric/merge-styles@7.17.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"ad4e06059cd00e17ff58032c768fd6db86c2cae7","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.17.0.tgz","fileCount":239,"integrity":"sha512-UFG0pKqjz6iGcYhDFDSb2br5TEOys90mCaXeXPln8QrIc5NTJG1gWeO4znG6r65e23Ab/hBz+lmoyfYxgr3fZw==","signatures":[{"sig":"MEYCIQDrZuS0sTUdVctaUPeZUlbg36i3okj53xIlDWiZBd2WawIhAP+BKUCYkXRC6VerjYKX5+AIJQQU5sMgWMOTGULqydgl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1300052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRQTDCRA9TVsSAnZWagAAGz8P/0Phh28ZPBg00Pz8UPcI\nMDer43CX6mesy6AMM8uxop8V0pw5zoS/EK1cGjcU5IuMZ+nz1Ty/lcNQWzkL\nTZmaS98vymwaarig/uozap0bpnprnv5clwqPHLLxqZQEneOOtAKQoyTlpyZi\nObW3ULKMMey5nF+jRmmzKqTmHsTOpGrm6mY1O5vbZL3aJ8lASPrpSr4hAAcU\nACj1iXtrIagpOk7aEEvCnjNxd1HUzFyv3imQxuU9lgYYL0WpY943uXYF+WHY\niIlKNCszIC7I5T0YVPwYKMy5LaFH3FCm5ItxIVhdm1WGaP8tHEtDjeCN8Cy3\nJopzMrK5JxM3z8f7VOFlcC77IAxzc8n7a+IxKakiGCiUuhPOBaLZlaiPh+OH\nZQtT0WczlXFYJZrIE615dxnshaMfMamO2DBYDIcR55Bt8lRs8aUhbfgWH9ua\nefl6Gd9+hUgj5ckzwHhFDoUgCIHM9jg83nJzMGqNHdnhvMeB1mC+E9ey/Wbj\nhM2ak2nkpXId9CVON/K7b1tPqQJUGzx0Aqkk5Gr/BQRb1m9boB6/GJVY+A/i\n5yT0zOEZT7p6bNZRR9I0NP+qXnm5/oTwgFY80HVckXW1HeZRsm8DIY8jcjEp\nNKzoV6SsCoJ3S3EEQiX4fAU5FTbeU/6suN8Qp1zL0uPM26bS5VSf2YDub+eY\nqIXV\r\n=cEMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.4","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.22"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.17.0_1598358723404_0.3420747925474974","host":"s3://npm-registry-packages"}},"7.18.0":{"name":"@uifabric/merge-styles","version":"7.18.0","license":"MIT","_id":"@uifabric/merge-styles@7.18.0","maintainers":[{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"uifabricteam","email":"dzearing@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"66c5d0e0a4ce03791d0ff356634b51ae1de4e36a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.18.0.tgz","fileCount":239,"integrity":"sha512-805WIbN7lAJATXKxZjjRbIgN7raRMwWYWeDkJJ52PCPuCesOvbpdr0GkH8rC6GQ7EB0MB7YM2i6Fiye7SFewbw==","signatures":[{"sig":"MEUCIG0tqkVuzPY9YmsaJHQlClN5aO1Ve8gUo+GTQNUKEupVAiEA7pQ4NqN5WrKa4lKBi+5WmSCmd0oSQ2zQA1Qt1Uui914=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1303843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSPduCRA9TVsSAnZWagAAi5sP/3IUXkUKPgHVfdniyv7L\nGq7cmYj/txRyTb62Mbd+7801IgVS69wq3iXpmP3YlpbIPXwkmJjcLgUGeKnQ\n+0HeUtzpelcpPwBiGRZEdRRBbc2MlU55FjUzT2HXVgVoxB9dfJUmxOS/RRt1\nlnDqN6e4gIQsrv9vCAz8Vart0GxQif+e8BfD/9iNNkoVnz5To+qbGpNx8be+\nMgMJqTN4YlH97yPvnKzTkxDpFPzSqg5Tzhdyo2uCDrVw8c0lPmXuIy+AhcWs\niI10AD5M6GxfhfvQ1bngFCmQBrDgPGMNWACdldYnwDvKZQJ1jXOyuvcOCRZx\nj08/k2eKY7j+jnekDtb0riv3sY2wPsJa7sFxrktDs9140km1QUJbyosJzs5t\nnCCJ6z9AqDVRFjmALPPKHli+wVIZf2qI/EEsLG2Ry/R2Av230fnxhkVr5VRm\nAx/4lEtv/BRQBEltvi/HSRARPzNm4SaTdOp3vnwbvpRwADm2lrU6+Zk7nKYn\nanp8ue2RSdironFF/U3XWJTmh/khTZPxYBAbrfZJN/01Qnr9B7IB6MXVOSy5\nM9i7vvESbXU0FgQClBuSxVETPXiD6ZO9KpTSXAMGcM/2oM2AdBOTILeW8DGr\ntKtTDjNivNS0b/i95SqdZPZBT+GvWIuDY/+nIlFilFamecn+M7V0p4bc2hyf\neMK0\r\n=cEQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.22"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.18.0_1598617454225_0.36259569694736893","host":"s3://npm-registry-packages"}},"7.19.0":{"name":"@uifabric/merge-styles","version":"7.19.0","license":"MIT","_id":"@uifabric/merge-styles@7.19.0","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"63eac8fa61423aa99fd0223c151fee3125c6067a","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.0.tgz","fileCount":257,"integrity":"sha512-4BkeZLmZkGgFxBoN47MgZ2J26KaJy/VPorx7lRBPovmsj0SW480FHel7XcGNW7hrl/pSIl7xaFiKIidc9muqWw==","signatures":[{"sig":"MEQCICOrh8RAfp7BLKVQd1DndH9boErJ0Q4qNo7LhJrPsNn6AiBg8nY50iU65x2laTjuDjvXLbevaZOw5uQyRTThcmeu+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1310335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYLHECRA9TVsSAnZWagAAtWIP/108mYiS3v/T0y32mHow\nPP2MWpy7T4XUEvbTMIiKTWcHsSCDEaD6e5YgzmNBWs5Z1jfQkyVWm1BrkPCd\nJh0AEMxNVOq8YdIWsqnalsoSgyPUDsB9jKzrmhp+OdsGUJA1XTcELhe7lwBn\nbiLoSGHbey/oa/kaexgE7rrUl8evk9I0vNCZHAvwKsT3sVttlcuE/HzuCN2v\nZGmmZbiAmvsP5brMcsr4oJ6zsGR5D1b+l3479Bo4dvSW0TATXrGLDJiRHwGF\neFF+VprFhM1DAPXbMDIa73ggtnM5CZGDrdES6oxPMY8CP5sfSDaOYBpazGUb\n+iQTTuKzxibNbygozIKFvD22lWM5JkgPiHk0CmXU8zVRbaxSibt5ARI3SFNt\nQEWS2xGEp3K+aYW7RAqOkI6rHQ+cQf/P91MUR9CkX5SHv4YO9nzQ+ezKMEoX\n5hecWn2P9qYP9l2sgp1qdQgI/gsCB8cFtXFlZq4j6SZYvDIs3iFEW5IdsjiV\nLye5zZ6AYddnCn4jawhcWxN7RGrPBksVsqAmfab2U09UZaYgEhOriaot8lD1\nWUuwqip/iMq9SndV79sAJibIYxG0RAhvI5nomAMqOBGx/VqLMrRHqucrdcIV\nB6FEc1gkZcRENLP0Qtq8bK9QLIJ8HkmffR7RedJsu6awXMiqNugx9zlQHq7h\n572H\r\n=p5V+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.22"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.0"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.19.0_1600172483810_0.348518513651372","host":"s3://npm-registry-packages"}},"7.19.1":{"name":"@uifabric/merge-styles","version":"7.19.1","license":"MIT","_id":"@uifabric/merge-styles@7.19.1","maintainers":[{"name":"kenotron_msft","email":"kchau@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"446b3da48ce9925d1649edd0fc232221974b00c9","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz","fileCount":257,"integrity":"sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==","signatures":[{"sig":"MEQCIAL/Odd7WypjHKiUg9pJ1QSZIrdnD2bFPeMUpd/2jVyGAiBfZYFvDs7vYmvR8IL+XnxUf4h/SRyE/rHHSQCWbr8kqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYgONCRA9TVsSAnZWagAAbtoP/iuPVCJlmCSlyvzMInPh\nC+2ZD0kVG0CxKaJK6+fF80rZY4XWq8RKNKTXYi2xsOPg1q5X3GwWe6/MJAB2\n6kCodvryHC1t2/CZ3FnG1lg135sDtoUqTwIWn9arftGlzjZN3P/V6e1suUBv\nVwFSum8yDnn2YP7iBi6SQPMyyQfMGuN23EFgX4QQ0BdXGDm9hj4MoPpJEr0M\n+EUR/O4GER+bMLENPK8D3PdRihSssvE7fbLLhb51VQWPLPgFSdkRiGTCqnzp\n6CUeXmdYokFRQ0AEMVR2z3WgGUVumjAtJToh5c1gZECGnGjV8pY9D4zHI6Jd\n5pshR2oDtsN2SxAMIwa/yD9Z8eRwr2FlRo4MDXZVKgx0kw+GhVHlywU64G6i\n78eSxYnfhn9HW4QE333UbtoM4In7uiks3F7LjcZioT9ET534n1YOiQzWBULp\nyun/mDoetTgaC1558Z30JHFJPrEsiLV/WNxeKb2Qmb344mZCFrxZoWnHgX8N\njBHVeppf1BIM2qkP8G7JuYGK1IVUELKcJGDzApv7CFs7s7NWm5yFnzzrndMR\nFambixxjHM2CEfyhpZfzKJBIsD94H3Fh3Xxfh4g0G4XDHgSFyeU7lrs9RFB9\nzHmSq68Wqh7IKLmIaT7CWwS3GjomsEXWtdq8Zk2C4SMI5w6L5vRcT9wbt3rj\nvcvP\r\n=2yUR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.23"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.1"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.19.1_1600258957411_0.8478036766233346","host":"s3://npm-registry-packages"}},"7.19.2":{"name":"@uifabric/merge-styles","version":"7.19.2","license":"MIT","_id":"@uifabric/merge-styles@7.19.2","maintainers":[{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"},{"name":"jasongore","email":"jasongore@gmail.com"},{"name":"kenotron_msft","email":"kchau@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"e020adc2f9b238f0feb855274dfeedaf6d5822a7","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.19.2.tgz","fileCount":257,"integrity":"sha512-kTlhwglDqwVgIaJq+0yXgzi65plGhmFcPrfme/rXUGMJZoU+qlGT5jXj5d3kuI59p6VB8jWEg9DAxHozhYeu0g==","signatures":[{"sig":"MEYCIQD0o/+/P0NOXY6nP6WkRtPIZB3R/V1UZF2y/5EFwJganQIhAI7mIRMVhw+DxGkUEwEv7/IDwn2Pgg75eTWx29NQbAtY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2fcaCRA9TVsSAnZWagAAEggQAI+ahvFMve8zJhTyoTqO\ncFjA5NZJNY+5OBAPyTZGm3AwwQSeUAJ99kIz3FNtpkGGmHo3s5DrFGeMmTn6\nTPrkBMw0GnTJffP+PdRXZROAHX6CweX+V+ZJJUuG38LY+UkAVZhDkqrzrE8V\n2v05X11sZnretm+WfTedp0m/pgCySjDISAjYQYAQcbyC5NnOqPppX/RcEDTm\nrIBDjitKuVQyUZ7CL39xy8U7X/xutX7chlXqcJIYU/aMXYR59hAu/uHyeDW4\nIaSB2oCoGRwoTwclCOs4MUdI3UMyykNp6xoX945DVnRdNIRG5fVsUpPfXYt7\nqCvoUojcPv8jo+X5VODflZwGVyNtw11TChWqsX9tzgwEpsgnEsg1JXv5GLqI\nKaRfb7919R9CA17Zzn8VPYycoshgXU8B4evaFLm1biYS02X65OgeofUZ4nFi\nNzQrmgR50ONSHWCBeP84/x8Jr+K6VIU0EgRfJrVQjA5ESRJRTJzbLF0+1d4V\nOvpKNwtKQDzLbkAHHoTgsdELeoVY9VkFSHDsFXsLIzHLYjJWEjHk6ilAf/DN\nA+XoAdAVHvs0CW/+K3G+Sm/Se7GPRRZXH1U9TCkZlLcZNk7bqIOEI+aLSYTJ\n1jPizZsyeVh7R9e8XgOHsB8lIW4hkiaUGE5anWfMx5pwGH7wJSa1I/ridIuZ\nqbbu\r\n=ReGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"dzearing","email":"dzearing@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.6","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.18.4","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.24"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.19.2_1614374845366_0.07705672663923058","host":"s3://npm-registry-packages"}},"7.20.0":{"name":"@uifabric/merge-styles","version":"7.20.0","license":"MIT","_id":"@uifabric/merge-styles@7.20.0","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"864793617713c768a9d9ec6f645fa9f4605eb9ad","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.20.0.tgz","fileCount":257,"integrity":"sha512-7u1oF1lGmNDzOfE9UhULAO9xcEkZV2DDlKlbeIHuXQUGG480drfDWqNPk5LuGNx4ogvH9qSNPbXeGLLZYBb4wQ==","signatures":[{"sig":"MEYCIQC7BcODHKeuIVzhjOMfuluig3m5JljGqakEhO0gEDE1GgIhAJboxnASArcFI1dW81N6wdbcdCDJH5K6MdTX8HnAkQ47","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1307592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjET85ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/ZQ//WERQsETXNzjSa1JSpi/xd4X8fO6a6vejmwwjCY7mlMoIB186\r\n6zmUVgiQgH4+y7gyqdORNT9yLctfFlOqFCTcgAZEdLGPuE4c/MRLWvdTkEp0\r\niF/ipg/thWyy4Ged3GdFohXyM0Helu2+dO//Eh0e8fK7+IeTXDuUCSldm1F6\r\noGimRMPPDESnmN3lR0bl6+uyhSTLE+5CHr62atJjr3ndfYsUJPGx5toTx0ep\r\nYjA4ZLTvRFdX5W8sGc0mF7flczTwpfJVEv26Ne+fKK5J63E7c5eDTb/ul1FE\r\nz2WmjiDMxhlEo1Z6q8vS9u3iycxca2PWBMGoNnEWDtgBWrdDqFxDvs/cFTaD\r\nNB43emb+3wXlFA1m1pvaXjGkBKpx87SFMrHh53U2UiyOWgQIplbVxfJYq9YM\r\n5nYSpipBqunFzdJQj+cI6JA2EvdTi4mFaFodT62ZVijgWmsDl1wx0FJqVRi0\r\n4hN+33l76zvnrf6JKktjHOa+YXy4e+6uuTwWAUwqGJy6IQAQVW2lYJZ1o/Yu\r\nOhQgkmcAsW6eqj67nRNxQ9CuwRVGNtMnHYGA1JYXVUAvRI3BeEzN9pOt4KZX\r\nZ0cwfMLAkFVxRQNnVF0vUyPWKPrIwogDqkCwC+t6GnU0f4XFJ4HtsKJ0Zm++\r\nkAL2x89sc1TVF0Zg+Tt89k/c7VxG8ZddV7M=\r\n=6jv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.16","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.22.12","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.24"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.20.0_1662074680720_0.4592954515596004","host":"s3://npm-registry-packages"}},"7.20.1":{"name":"@uifabric/merge-styles","version":"7.20.1","license":"MIT","_id":"@uifabric/merge-styles@7.20.1","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"56a9457c696b1efc5947c8392bcc479180d14d02","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.20.1.tgz","fileCount":257,"integrity":"sha512-LaxbbAGGh/X4x9gwd6kMFIiJKOczy0kHJ1/16b2CAs9De+Ra0mxdTfO9yHbLXKXOvNJcx0mzwaYMDrgBG7cT8A==","signatures":[{"sig":"MEQCIHowevVgKy0TqPiA/BZb+e+72542BUchFGbmgUO3ueIUAiArHIDgnLuD/EfA0tCfQ6U+jmwGPCHI0U8meBWm3IQT9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1308832,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjN2KNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/wxAAozkOfXTtqpCiyij8SvPppo2iG69lQtZANQgDL9WXg5utPQvG\r\nVV7E7UmXlwqHmrIG9cs8Qa/hIxQwcANkjaP/BXQ5xQvlXB4Fg/xQokTaKG4P\r\nyhgzifs/aowyvs/M9WKzR2WzD0R7XhPxAUhQfe2MKkxC3IvHj5wWPWWvA5hD\r\nSKUeTqN6JKa7Y23XZSKglEMMxnDKuDsJXvbF9lQVbsFMiXCwe2la/aY180Hk\r\n14ila1YzPAU2vo2zkztEUHpBcIZUb829x9YvjaIm7uQzXmXiaPxfqyDfZIPM\r\nB+AfSiGN6eXxx7lycJJH13UsFxjl4bqmVH3tRWcJvHnPcJhlSoXmz4P3LkXM\r\n5CvDrdULGQRy5npNBuhiQX4vo8l2dy0UUUP1s62888NeWDgz8BPfkwVAN1SR\r\nHAhvkrUDlC4xwZE8pDspAIPDLEMFViUXNwi8DQLRXt0CTvYjuqhkcey0sb61\r\nMYS6TX5Uzrp7GOD34cV8eCOiHJ13Cgyx6V62oUpThw/nv9Luznxl/SWUhJVY\r\nZftAYvN9Dfr0CT09I9FrR3tKwhvzRRl8llBW0SXwLUdieeya18AExsVQv1kE\r\nrZg0g1Fr9bCgW6lJhWyVUG3maC4HqiqnyQR3CKXyG4nSuBsAF9tl55eWNOe7\r\nP8tLQALhMVROUpcojQuLTDYnXrME7FaBfFw=\r\n=e301\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.16","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.22.12","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.24"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.20.1_1664574093459_0.7819848008988917","host":"s3://npm-registry-packages"}},"7.20.2":{"name":"@uifabric/merge-styles","version":"7.20.2","license":"MIT","_id":"@uifabric/merge-styles@7.20.2","maintainers":[{"name":"microsoft1es","email":"npmjs@microsoft.com"},{"name":"ecraig12345_msft","email":"elcraig@microsoft.com"},{"name":"justslone","email":"jslone@microsoft.com"},{"name":"uifabricteam","email":"fui-svc@microsoft.com"},{"name":"dzearing","email":"dzearing@microsoft.com"},{"name":"cliffkoh","email":"cliff.koh@microsoft.com"}],"homepage":"https://github.com/microsoft/fluentui#readme","bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"dist":{"shasum":"dfd8f20af392d04081060015d81d3bec9c8c53fa","tarball":"https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.20.2.tgz","fileCount":257,"integrity":"sha512-cJy8hW9smlWOKgz9xSDMCz/A0yMl4mdo466pcGlIOn84vz+e94grfA7OoTuTzg3Cl0Gj6ODBSf1o0ZwIXYL1Xg==","signatures":[{"sig":"MEQCIE587lLscEBWZgh7SNOyKakpDtJFmX+OGozoJJWSNqcuAiAVKS5pYMVgRb3GG+IkqOzx3UDU3dWfE22pYRqM1lN6qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1311050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjX73LACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouNxAAoYt7fw6Pz3zZbNFsWg5RuPx2+AVOeOa1bIO2jbd0WQJZayTx\r\ntXUEI0eKi9lvozocW2dsjEqQFEsrfeh+59BZZGbEYzIPWM7OX0Q9Icbt+2D3\r\nRBXWqIgyI09kmkmbgeHjHUjc8mnluJ8p4iEURPlzyQ2U8uNiZhX/vrcqIYfI\r\nRL16yM+/TG7aW79BNtnHrT29DeB4pGjsxPhuDSsPSkpgRkcX/KuwSZKmFfgD\r\n0Witj9eFScebV/RTwqmQofw1hwICARjwx+GtZZaXC1mOUr/24lt+h87J01O4\r\nfTJKb86G+2GhZ7gspxTlYMKplGd3iBOZKjLTqHzlK5JYgiLxI1EXyVBiRUGh\r\n9dUHYrfHOVcsxC1ptYRg+dcZxd2pTKtD+Ak7MH6DTgvSxmlOGeR46Bw4D9pv\r\nBTYrrddofpcZtzXVVsvLCBo3I5ezO8Ddn4iQC0v7bi4KEe5Hn5w+Rx8qXNf6\r\n1bwleObGCEc+T0fDxoDf5xlIDAST1tcrFjdye45Qj1wSGxJ88B3hSK/D4q4m\r\nQSZ1elC+HtVh0fLJboD4Uexcbeb0pJZh04h+bXNVzOdwuKW2hLh673zw+10E\r\nQCr05J8SQengMjGkdTdjpXShWGGCTBwKRPHtOqa+6X7qsexiYX4ap9NfJhVH\r\n+fBQXIdSj4e0Ex2GMkAVB02hw31wVtFB+Oo=\r\n=w5YD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib-commonjs/index.js","module":"lib/index.js","scripts":{"just":"just-scripts","lint":"just-scripts lint","test":"just-scripts test","build":"just-scripts build","clean":"just-scripts clean","bundle":"just-scripts bundle","code-style":"just-scripts code-style","start-test":"just-scripts jest-watch","update-api":"just-scripts update-api"},"typings":"lib/index.d.ts","_npmUser":{"name":"uifabricteam","email":"fui-svc@microsoft.com"},"repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"_npmVersion":"6.14.16","description":"Style loading utilities.","directories":{},"sideEffects":["lib/version.js"],"_nodeVersion":"12.22.12","dependencies":{"tslib":"^1.10.0","@uifabric/set-version":"^7.0.24"},"_hasShrinkwrap":false,"devDependencies":{"@types/jest":"~24.9.0","@uifabric/build":"^7.0.0","@fluentui/eslint-plugin":"^0.54.2"},"_npmOperationalInternal":{"tmp":"tmp/merge-styles_7.20.2_1667218891384_0.3867134897727402","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-08-24T21:09:01.873Z","modified":"2026-07-24T19:30:20.427Z","5.0.0-beta.1":"2017-08-24T21:09:01.873Z","5.0.0-beta.2":"2017-08-25T00:27:52.605Z","5.0.0-beta.3":"2017-08-25T00:51:33.288Z","5.0.0-beta.4":"2017-08-30T00:54:58.292Z","5.0.0-beta.5":"2017-08-30T23:39:45.029Z","5.0.0-beta.6":"2017-09-01T17:21:07.054Z","5.0.0-beta.7":"2017-09-01T17:44:51.637Z","5.0.0-beta.8":"2017-09-01T22:12:40.153Z","5.0.0-beta.9":"2017-09-05T22:11:46.485Z","5.0.0-beta.10":"2017-09-12T00:01:48.612Z","5.0.0-beta.11":"2017-09-12T00:23:28.911Z","5.0.0-beta.12":"2017-09-12T00:39:54.736Z","5.0.0-beta.13":"2017-09-14T03:52:59.171Z","5.0.0-beta.14":"2017-09-18T17:40:36.331Z","5.0.0-beta.15":"2017-09-18T18:34:32.122Z","5.0.0-beta.16":"2017-09-18T18:50:55.764Z","5.0.0-beta.17":"2017-09-21T01:31:05.011Z","5.0.0-beta.18":"2017-09-22T19:06:18.613Z","5.0.0":"2017-09-27T00:42:55.028Z","5.1.0":"2017-09-29T10:20:35.186Z","5.2.0":"2017-09-30T01:26:48.065Z","5.3.0":"2017-10-05T10:17:53.616Z","5.3.1":"2017-10-06T10:18:54.762Z","5.3.2":"2017-10-09T10:08:18.395Z","5.3.3":"2017-10-13T01:36:10.747Z","5.4.0":"2017-10-13T04:00:29.134Z","5.4.1":"2017-10-17T17:17:53.574Z","5.4.2":"2017-10-20T18:42:22.400Z","5.5.0":"2017-10-24T10:21:20.610Z","5.5.1":"2017-11-02T18:20:57.563Z","5.6.0":"2017-11-10T17:09:47.838Z","5.7.0":"2017-11-29T11:24:17.505Z","5.8.0":"2017-12-01T11:11:24.609Z","5.8.1":"2017-12-11T11:24:15.767Z","5.9.0":"2017-12-16T05:07:30.963Z","5.10.0":"2017-12-28T11:24:00.922Z","5.10.1":"2018-01-17T11:11:34.707Z","5.11.0":"2018-01-25T11:23:22.355Z","5.11.1":"2018-02-06T11:14:49.776Z","5.11.2":"2018-02-07T11:24:17.667Z","5.12.0":"2018-02-14T22:11:06.953Z","5.12.1":"2018-02-16T11:23:45.555Z","5.12.2":"2018-02-21T11:12:21.357Z","5.13.0":"2018-03-02T11:25:53.241Z","5.14.0":"2018-03-25T03:08:19.380Z","5.14.1":"2018-04-06T10:26:11.159Z","5.15.0":"2018-04-10T17:37:40.713Z","5.15.1":"2018-04-16T10:23:41.836Z","5.15.2":"2018-04-17T18:47:20.965Z","5.16.0":"2018-04-23T10:25:12.051Z","5.16.1":"2018-04-25T05:32:23.277Z","5.17.0":"2018-04-26T10:12:45.474Z","6.0.0-beta1":"2018-05-08T02:19:26.430Z","6.0.0-beta2":"2018-05-08T18:21:01.655Z","6.0.0-beta3":"2018-05-11T22:39:14.942Z","6.0.0-beta4":"2018-05-14T23:19:00.521Z","5.17.1":"2018-05-23T10:29:08.254Z","6.0.0-beta5":"2018-05-23T18:09:20.817Z","6.0.0-beta6":"2018-05-23T22:08:57.053Z","6.0.0":"2018-05-30T22:10:50.429Z","6.0.1":"2018-06-04T10:16:22.775Z","6.0.2":"2018-06-05T00:44:38.493Z","6.1.0":"2018-06-07T03:29:34.287Z","6.2.0":"2018-06-07T16:35:42.592Z","6.2.1":"2018-06-20T10:26:03.451Z","6.2.2":"2018-07-10T05:05:22.584Z","6.2.3":"2018-07-10T21:54:14.416Z","6.3.0":"2018-07-13T18:55:13.090Z","6.4.0":"2018-07-13T21:32:44.985Z","6.5.0":"2018-07-18T10:25:58.124Z","6.5.1":"2018-07-19T21:25:39.452Z","6.6.0":"2018-07-26T10:29:06.108Z","6.7.0":"2018-07-30T10:27:19.475Z","6.8.0":"2018-08-27T10:27:51.488Z","6.8.1":"2018-08-28T10:24:05.486Z","6.8.2":"2018-08-29T10:28:49.991Z","6.8.3":"2018-09-05T10:29:33.217Z","6.8.4":"2018-09-13T17:38:15.136Z","6.9.0":"2018-09-20T12:25:43.136Z","6.9.1":"2018-09-21T14:26:24.870Z","6.9.2":"2018-09-28T12:27:58.323Z","6.9.3":"2018-10-01T12:27:42.322Z","6.9.4":"2018-10-08T12:25:12.277Z","6.10.0":"2018-10-11T23:13:47.422Z","6.10.1":"2018-10-15T12:29:31.959Z","6.10.2":"2018-10-18T20:22:57.374Z","6.10.3":"2018-10-22T12:30:18.949Z","6.10.4":"2018-10-24T12:29:15.791Z","6.11.0":"2018-10-26T12:32:52.218Z","6.12.0":"2018-11-08T00:15:06.695Z","6.13.0":"2018-11-08T04:17:51.247Z","6.14.0":"2018-11-13T13:31:10.602Z","6.15.0":"2018-11-15T13:36:39.893Z","6.15.1":"2019-01-23T22:53:32.840Z","6.15.2":"2019-01-30T13:36:44.530Z","6.16.0":"2019-03-01T13:33:29.455Z","6.16.1":"2019-03-08T13:32:31.161Z","7.0.0-alpha001":"2019-03-22T20:05:51.295Z","7.0.0-alpha002":"2019-03-25T10:39:17.281Z","7.0.0-alpha003":"2019-03-26T16:19:27.289Z","6.16.2":"2019-03-27T12:34:40.213Z","6.16.3":"2019-04-01T12:37:32.908Z","7.0.0-alpha004":"2019-04-01T18:23:11.283Z","6.16.4":"2019-04-02T00:39:28.581Z","7.0.0-alpha006":"2019-04-04T10:39:12.955Z","7.0.0-alpha007":"2019-04-04T22:41:49.479Z","7.0.0-alpha008":"2019-04-04T23:50:43.029Z","7.0.0-alpha010":"2019-04-05T01:02:28.251Z","7.0.0-alpha011":"2019-04-08T10:38:58.915Z","6.16.5":"2019-04-11T12:37:34.967Z","7.0.0-alpha012":"2019-04-11T21:02:11.289Z","7.0.0-alpha013":"2019-04-14T22:31:07.171Z","7.0.0-alpha014":"2019-04-15T00:56:37.271Z","6.17.0":"2019-04-15T12:34:06.904Z","7.0.0-alpha015":"2019-04-15T22:05:25.237Z","7.0.0-alpha016":"2019-04-17T10:38:09.766Z","7.0.0-alpha017":"2019-04-22T17:09:16.405Z","7.0.0-alpha018":"2019-04-24T10:38:15.212Z","7.0.0-alpha019":"2019-04-30T10:33:41.982Z","6.17.1":"2019-05-02T12:37:13.526Z","6.17.2":"2019-05-08T12:38:03.254Z","6.17.3":"2019-05-14T07:53:03.439Z","7.0.0-alpha021":"2019-05-15T10:41:41.377Z","7.0.0-alpha022":"2019-05-17T10:37:08.173Z","7.0.0-alpha023":"2019-05-21T10:37:46.911Z","6.17.4":"2019-05-21T12:21:00.548Z","7.0.0-alpha025":"2019-05-30T23:58:32.116Z","7.0.0-alpha030":"2019-06-03T10:39:59.882Z","7.0.0-alpha031":"2019-06-04T10:40:41.013Z","7.0.0-alpha032":"2019-06-04T17:55:20.471Z","7.0.0-alpha033":"2019-06-05T10:35:42.540Z","6.18.0":"2019-06-05T12:22:43.336Z","7.0.0-alpha034":"2019-06-06T22:47:11.919Z","7.0.0-rc001":"2019-06-07T23:08:59.948Z","7.0.0-rc002":"2019-06-10T21:07:09.574Z","6.18.1":"2019-06-11T12:21:48.579Z","6.19.0":"2019-06-12T00:43:02.106Z","6.19.1":"2019-06-12T22:16:10.717Z","7.0.1":"2019-06-13T00:26:06.613Z","6.19.2":"2019-06-14T03:04:33.237Z","7.0.2":"2019-06-14T12:28:12.322Z","7.1.0":"2019-06-27T18:25:17.566Z","7.1.1":"2019-07-01T18:51:57.123Z","7.2.0":"2019-07-17T18:57:11.644Z","6.19.3":"2019-07-22T12:22:02.434Z","7.3.0":"2019-08-07T12:32:02.494Z","7.4.0":"2019-08-13T12:30:46.886Z","7.4.1":"2019-08-23T12:33:59.031Z","7.5.0":"2019-08-26T12:30:13.060Z","7.5.1":"2019-09-04T04:09:03.287Z","6.19.4":"2019-09-04T12:23:18.432Z","7.5.2":"2019-09-12T12:33:35.768Z","7.6.0":"2019-09-20T12:33:38.716Z","7.7.0":"2019-09-26T12:31:55.497Z","7.8.0":"2019-10-21T12:32:57.321Z","7.8.1":"2019-11-08T12:29:44.264Z","7.8.2":"2020-01-17T02:30:47.370Z","7.8.3":"2020-01-22T12:33:23.127Z","7.8.4":"2020-01-28T12:41:21.920Z","7.8.5":"2020-01-31T18:57:46.939Z","7.8.6":"2020-02-07T12:39:23.863Z","7.8.7":"2020-03-07T01:39:21.670Z","7.8.8":"2020-03-19T12:27:37.837Z","7.8.9":"2020-03-23T12:26:17.664Z","7.8.10":"2020-03-25T12:27:45.384Z","7.8.11":"2020-03-30T19:07:38.899Z","7.9.0":"2020-04-16T00:08:38.296Z","7.10.0":"2020-04-16T04:00:03.944Z","7.11.0":"2020-04-17T12:31:34.712Z","7.11.1":"2020-04-21T12:31:08.952Z","7.11.2":"2020-05-05T12:31:10.312Z","7.11.3":"2020-05-07T01:03:15.489Z","7.11.4":"2020-05-08T12:32:12.555Z","7.12.0":"2020-05-11T12:32:38.862Z","7.13.0":"2020-05-15T00:04:10.140Z","7.14.0":"2020-05-15T20:30:02.996Z","7.14.1":"2020-06-02T12:32:36.326Z","7.15.0":"2020-06-25T12:46:04.256Z","7.15.1":"2020-06-26T12:32:16.262Z","7.16.0":"2020-06-30T12:30:04.156Z","7.16.1":"2020-07-13T23:10:48.155Z","7.16.2":"2020-07-15T12:37:21.164Z","7.16.3":"2020-07-21T12:38:55.248Z","7.16.4":"2020-08-03T12:40:51.637Z","7.16.5":"2020-08-10T06:14:21.125Z","7.16.6":"2020-08-13T12:36:38.896Z","7.16.7":"2020-08-20T12:32:33.862Z","7.17.0":"2020-08-25T12:32:03.544Z","7.18.0":"2020-08-28T12:24:14.433Z","7.19.0":"2020-09-15T12:21:24.101Z","7.19.1":"2020-09-16T12:22:37.583Z","7.19.2":"2021-02-26T21:27:25.551Z","7.20.0":"2022-09-01T23:24:41.044Z","7.20.1":"2022-09-30T21:41:33.702Z","7.20.2":"2022-10-31T12:21:31.589Z"},"bugs":{"url":"https://github.com/microsoft/fluentui/issues"},"license":"MIT","homepage":"https://github.com/microsoft/fluentui#readme","repository":{"url":"git+https://github.com/microsoft/fluentui.git","type":"git"},"description":"Style loading utilities.","maintainers":[{"email":"fui-svc@microsoft.com","name":"uifabricteam"},{"email":"npmjs@microsoft.com","name":"microsoft1es"},{"email":"microsoft-oss-publishing@microsoft.com","name":"microsoft-oss-releases"},{"email":"dzearing@microsoft.com","name":"dzearing"},{"email":"cliff.koh@microsoft.com","name":"cliffkoh"}],"readme":"# @uifabric/merge-styles\n\nThe `merge-styles` library provides utilities for loading styles through javascript. It is designed to make it simple to style components through javascript. It generates css classes, rather than using inline styling, to ensure we can use css features like pseudo selectors (:hover) and parent/child selectors (media queries).\n\nThe library was built for speed and size; the entire package is 2.62k gzipped. It has no dependencies other than `tslib`.\n\nSimple usage:\n\n```\nimport { mergeStyles, mergeStyleSets } from '@uifabric/merge-styles';\n\n// Produces 'css-0' class name which can be used anywhere\nmergeStyles({ background: 'red' });\n\n// Produces a class map for a bunch of rules all at once\nmergeStyleSets({\n  root: { background: 'red' },\n  child: { background: 'green' }\n});\n\n// Returns { root: 'root-0', child: 'child-1' }\n```\n\nBoth utilities behave similar to a deep Object.assign; you can collapse many objects down into one class name or class map.\n\nThe 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.\n\n## Motivation\n\nDefining rules at runtime has a number of benefits over traditional build time staticly produced css:\n\n- Only register classes that are needed, when they're needed, reducing the overall selector count and improving TTG.\n\n- Dynamically create new class permutations based on contextual theming requirements. (Use a different theme inside of a DIV without downloading multiple copies of the css rule definitions.)\n\n- Use JavaScript to define the class content (using utilities like color converters, or reusing constant numbers becomes possible.)\n\n- Allow control libraries to merge customized styling in with their rules, avoiding complexities like css selector specificity.\n\n- Simplify RTL processing; lefts become rights in RTL, in the actual rules. No complexity like `html[dir=rtl]` prefixes necessary, which alleviates unexpected specificity bugs. (You can use `/* noflip */` comments to avoid flipping if needed.)\n\n- Reduce bundle size. Automatically handles vendor prefixing, unit providing, RTL flipping, and margin/padding expansion (e.g. margin will automatically expand out to margin TRBL, so that we avoid specificity problems when merging things together.)\n\n- Reduce the build time overhead of running through CSS preprocessors.\n\n- TypeScript type safety; spell \"background\" wrong and get build breaks.\n\n## What tradeoffs are there? Are there downsides to using JavaScript to process styling?\n\nIn static solutions, there is very little runtime evaluation required; everything is injected as-is. Things like auto prefixing and language specific processing like sass mixins are all evaluated at build time.\n\nIn runtime styling, much of this is evaluated in the browser, so you are paying a cost in doing this. However, with performance optimizations like memoization, you can minimize this quite a bit, and you gain all of the robustness enumerated above.\n\n# API\n\nThe api surfaces consists of 3 methods and a handful of interfaces:\n\n`mergeStyles(..args[]: IStyle[]): string` - Takes in one or more style objects, merges them in the right order, and produces a single css class name which can be injected into any component.\n\n`mergeStyleSets(...args[]: IStyleSet[]): { [key: string]: string }` - Takes in one or more style set objects, each consisting of a set of areas, each which will produce a class name. Using this is analogous to calling mergeStyles for each property in the object, but ensures we maintain the set ordering when multiple style sets are merged.\n\n`concatStyleSets(...args[]: IStyleSet[]): IStyleSet` - In some cases you simply need to combine style sets, without actually generating class names (it is costs in performance to generate class names.) This tool returns a single set merging many together.\n\n`concatStyleSetsWithProps(props: {}, ...args[]: IStyleSet[]): IStyleSet` - Similar to `concatStyleSet` except that style sets which contain functional evaluation of styles are evaluated prior to concatenating.\n\nExample:\n\n```tsx\nconst result = concatStyleSetsWithProps<IFooProps, IFooStyles>(\n  { foo: 'bar' },\n  (props: IFooProps) => ({ root: { background: props.foo } }),\n  (props: IFooProps) => ({ root: { color: props.foo } }),\n);\n```\n\n## Vocabulary\n\nA **style object** represents the collection of css rules, except that the names are camelCased rather than kebab-cased. Example:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  left: 42,\n};\n```\n\nAdditionally, **style objects** can contain selectors:\n\n```tsx\nlet style = {\n  backgroundColor: 'red',\n  ':hover': {\n    backgroundColor: 'blue';\n  },\n  '.parent &': { /* parent selector */ },\n  '& .child': { /* child selector */ }\n};\n```\n\nA **style set** represents a map of area to style object. When building a component, you need to generate a class name for each element that requires styling. You would define this in a **style set**.\n\n```tsx\nlet styleSet = {\n  root: { background: 'red' },\n  button: { margin: 42 },\n};\n```\n\n## Basic usage\n\nWhen building a component, you will need a **style set** map of class names to inject into your elements' class attributes.\n\nThe recommended pattern is to provide the classnames in a separate function, typically in a separate file `ComponentName.classNames.ts`.\n\n```tsx\nimport { IStyle, mergeStyleSets } from '@uifabric/merge-styles';\n\nexport interface IComponentClassNames {\n  root: string;\n  button: string;\n  buttonIcon: string;\n}\n\nexport const getClassNames = (): IComponentClassNames => {\n  return mergeStyleSets({\n    root: {\n      background: 'red',\n    },\n\n    button: {\n      backgroundColor: 'green',\n    },\n\n    buttonIcon: {\n      margin: 10,\n    },\n  });\n};\n```\n\nThe class map can then be used in a component:\n\n```tsx\nimport { getClassNames } from './MyComponent.classNames';\n\nexport const MyComponent = () => {\n  let { root, button, buttonIcon } = getClassNames();\n\n  return (\n    <div className={root}>\n      <button className={button}>\n        <i className={buttonIcon} />\n      </button>\n    </div>\n  );\n};\n```\n\n## Selectors\n\n### Basic pseudo-selectors (:hover, :active, etc)\n\nCustom selectors can be defined within `IStyle` definitions:\n\n```tsx\n{\n  background: 'red',\n  ':hover': {\n    background: 'green'\n  }\n}\n```\n\nBy 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`:\n\n```css\n.css-0 {\n  background: red;\n}\n.css-0:hover {\n  background: green;\n}\n```\n\n### Parent/child selectors\n\nIn 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:\n\n```tsx\n{\n  // selector relative to parent\n  '.ms-Fabric--isFocusVisible &': {\n    background: 'red'\n  }\n\n  // selector for child\n  '& .child' {\n    background: 'green'\n  }\n}\n```\n\nThis would register the rules:\n\n```css\n.ms-Fabric--isFocusVisible .css-0 {\n  background: red;\n}\n.css-0 .child {\n  background: green;\n}\n```\n\n### Global selectors\n\nWhile we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.\n\nTo register a selector globally, wrap it in a `:global()` wrapper:\n\n```tsx\n{\n  ':global(button)': {\n    overflow: 'visible'\n  }\n}\n```\n\n### Media and feature queries\n\nMedia queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:\n\n```tsx\nmergeStyles({\n  background: 'red',\n  '@media(max-width: 600px)': {\n    background: 'green',\n  },\n  '@supports(display: grid)': {\n    display: 'grid',\n  },\n});\n```\n\nProduces:\n\n```css\n.css-0 {\n  background: red;\n}\n\n@media (max-width: 600px) {\n  .css-0 {\n    background: green;\n  }\n}\n\n@supports (display: grid) {\n  .css-0 {\n    display: grid;\n  }\n}\n```\n\n### Referencing child elements within the mergeStyleSets scope\n\nOne important concept about `mergeStyleSets` is that it produces a map of class names for the given elements:\n\n```tsx\nmergeStyleSets({\n  root: { background: 'red' }\n  thumb: { background: 'green' }\n});\n```\n\nProduces:\n\n```css\n.root-0 {\n  background: red;\n}\n.thumb-1 {\n  background: green;\n}\n```\n\nIn 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. We recommend using global, non-changing static classnames\nto target the parent elements:\n\n```tsx\nconst classNames = {\n  root: 'Foo-root',\n  child: 'Foo-child',\n};\n\nmergeStyleSets({\n  root: [classNames.root, { background: 'lightgreen' }],\n\n  child: [\n    classNames.child,\n    {\n      [`.${classNames.root}:hover &`]: {\n        background: 'green',\n      },\n    },\n  ],\n});\n```\n\nThe important part here is that the selector does not have any mutable information. In the example above,\nif `classNames.root` were dynamic, it would require the rule to be re-registered when it mutates, which\nwould be a performance hit.\n\n## Custom class names\n\nBy 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'.\n\nWhen using `mergeStyleSets`, class names automatically use the area name as the prefix.\n\nMerging rules like:\n\n```ts\nmergeStyleSets({ a: { ... }, b: { ... } })\n```\n\nWill produce the class name map:\n\n```ts\n{ a: 'a-0', b: 'b-1' }\n```\n\nIf you'd like to override the default prefix in either case, you can pass in a `displayName` to resolve this:\n\n```tsx\n{\n  displayName: 'MyComponent',\n  background: 'red'\n}\n```\n\nThis generates:\n\n```css\n.MyComponent-0 {\n  background: red;\n}\n```\n\n## Managing conditionals and states\n\nStyle objects can be represented by a simple object, but also can be an array of the objects. The merge functions will handle arrays and merge things together in the given order. They will also ignore falsey values, allowing you to conditionalize the results.\n\nIn the following example, the root class generated will be different depending on the `isToggled` state:\n\n```tsx\nexport const getClassNames = (isToggled: boolean): IComponentClassNames => {\n  return mergeStyleSets({\n    root: [\n      {\n        background: 'red',\n      },\n      isToggled && {\n        background: 'green',\n      },\n    ],\n  });\n};\n```\n\n## RTL support\n\nBy default, nearly all of the major rtl-sensitive CSS properties will be auto flipped when the dir=\"rtl\" flag is present on the `HTML` tag of the page.\n\nThere are some rare scenarios (linear-gradients, etc) which are not flipped, for the sake of keeping the bundle size to a minimum. If there are missing edge cases, please submit a PR to address.\n\nIn rare condition where you want to avoid auto flipping, you can annotate the rule with the `@noflip` directive:\n\n```tsx\nmergeStyles({\n  left: '42px @noflip',\n});\n```\n\n## Optimizing for performance\n\nResolving the class names on every render can be an unwanted expense especially in hot spots where things are rendered frequently. To optimize, we recommend 2 guidelines:\n\n1. For your `getClassNames` function, flatten all input parameters into simple immutable values. This helps the `memoizeFunction` utility to cache the results based on the input.\n\n2. Use the `memoizeFunction` function from the `@uifabric/utilities` package to cache the results, given a unique combination of inputs. Example:\n\n```tsx\nimport { memoizeFunction } from '@uifabric/utilities';\n\nexport const getClassNames = memoizeFunction((isToggled: boolean) => {\n  return mergeStyleSets({\n    // ...\n  });\n});\n```\n\n## Registering fonts\n\nRegistering font faces example:\n\n```tsx\nimport { fontFace } from '@uifabric/merge-styles';\n\nfontFace({\n  fontFamily: `\"Segoe UI\"`,\n  src: `url(\"//cdn.com/fontface.woff2) format(woff2)`,\n  fontWeight: 'normal',\n});\n```\n\nNote that in cases like `fontFamily` you may need to embed quotes in the string as shown above.\n\n## Registering keyframes\n\nRegistering animation keyframes example:\n\n```tsx\nimport { keyframes, mergeStyleSets } from '@uifabric/merge-styles';\n\nlet fadeIn = keyframes({\n  from: {\n    opacity: 0,\n  },\n  to: {\n    opacity: 1,\n  },\n});\n\nexport const getClassNames = () => {\n  return mergeStyleSets({\n    root: {\n      animationName: fadeIn,\n    },\n  });\n};\n```\n\n## Controlling where styles are injected\n\nBy default `merge-styles` will initially inject a `style` element into the document head as the first node and then append and new `style` elements as next sibling to the previous one added.\n\nIn some cases you may want to control where styles are injected to ensure some stylesheets are more specific than others. To do this, you can add a placeholder `style` element in the head with `data-merge-styles` attribute:\n\n```html\n<head>\n  <style data-merge-styles></style>\n</head>\n```\n\nMerge styles will ensure that any generated styles are added after the placeholder.\n\n## Server-side rendering\n\nYou can import `renderStatic` method from the `/lib/server` entry to render content and extract the css rules that would have been registered, as a string.\n\nExample:\n\n```tsx\nimport { renderStatic } from '@uifabric/merge-styles/lib/server';\n\nlet { html, css } = renderStatic(() => {\n  return ReactDOM.renderToString(...);\n});\n```\n\nCaveats for server-side rendering:\n\n- Rules registered in the file scope of code won't be re-evaluated and therefore won't be included in the result. Try to avoid using classes which are not evaluated at runtime.\n\nFor example:\n\n```tsx\nconst rootClass = mergeStyles({ background: 'red' });\nconst App = () => <div className={rootClass} />;\n\n// App will render, but \"rootClass\" is a string which won't get re-evaluated in this call.\nrenderStatic(() => ReactDOM.renderToString(<App/>);\n```\n\n- Using `memoizeFunction` around rule calculation can help with excessive rule recalc performance overhead.\n\n- Rehydration on the client may result in mismatched rules. You can apply a namespace on the server side to ensure there aren't name collisions.\n\n## Working with content security policy (CSP)\n\nSome content security policies prevent style injection without a nonce. To set the nonce used by `merge-styles`:\n\n```ts\nStylesheet.getInstance().setConfig({\n  cspSettings: { nonce: 'your nonce here' },\n});\n```\n\nIf you're working inside a Fluent UI React app ([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/)), this setting can also be applied using the global `window.FabricConfig.mergeStyles.cspSettings`. Note that this must be set before any Fluent UI React code is loaded, or it may not be applied properly.\n\n```ts\nwindow.FabricConfig = {\n  mergeStyles: {\n    cspSettings: { nonce: 'your nonce here' },\n  },\n};\n```\n","readmeFilename":"README.md"}