Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

sheet.browser.cjs.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. /*
  4. Based off glamor's StyleSheet, thanks Sunil ❤️
  5. high performance StyleSheet for css-in-js systems
  6. - uses multiple style tags behind the scenes for millions of rules
  7. - uses `insertRule` for appending in production for *much* faster performance
  8. // usage
  9. import { StyleSheet } from '@emotion/sheet'
  10. let styleSheet = new StyleSheet({ key: '', container: document.head })
  11. styleSheet.insert('#box { border: 1px solid red; }')
  12. - appends a css rule into the stylesheet
  13. styleSheet.flush()
  14. - empties the stylesheet of all its contents
  15. */
  16. // $FlowFixMe
  17. function sheetForTag(tag) {
  18. if (tag.sheet) {
  19. // $FlowFixMe
  20. return tag.sheet;
  21. } // this weirdness brought to you by firefox
  22. /* istanbul ignore next */
  23. for (var i = 0; i < document.styleSheets.length; i++) {
  24. if (document.styleSheets[i].ownerNode === tag) {
  25. // $FlowFixMe
  26. return document.styleSheets[i];
  27. }
  28. }
  29. }
  30. function createStyleElement(options) {
  31. var tag = document.createElement('style');
  32. tag.setAttribute('data-emotion', options.key);
  33. if (options.nonce !== undefined) {
  34. tag.setAttribute('nonce', options.nonce);
  35. }
  36. tag.appendChild(document.createTextNode(''));
  37. return tag;
  38. }
  39. var StyleSheet =
  40. /*#__PURE__*/
  41. function () {
  42. function StyleSheet(options) {
  43. this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
  44. this.tags = [];
  45. this.ctr = 0;
  46. this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
  47. this.key = options.key;
  48. this.container = options.container;
  49. this.before = null;
  50. }
  51. var _proto = StyleSheet.prototype;
  52. _proto.insert = function insert(rule) {
  53. // the max length is how many rules we have per style tag, it's 65000 in speedy mode
  54. // it's 1 in dev because we insert source maps that map a single rule to a location
  55. // and you can only have one source map per style tag
  56. if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
  57. var _tag = createStyleElement(this);
  58. var before;
  59. if (this.tags.length === 0) {
  60. before = this.before;
  61. } else {
  62. before = this.tags[this.tags.length - 1].nextSibling;
  63. }
  64. this.container.insertBefore(_tag, before);
  65. this.tags.push(_tag);
  66. }
  67. var tag = this.tags[this.tags.length - 1];
  68. if (this.isSpeedy) {
  69. var sheet = sheetForTag(tag);
  70. try {
  71. // this is a really hot path
  72. // we check the second character first because having "i"
  73. // as the second character will happen less often than
  74. // having "@" as the first character
  75. var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers
  76. // the big drawback is that the css won't be editable in devtools
  77. sheet.insertRule(rule, // we need to insert @import rules before anything else
  78. // otherwise there will be an error
  79. // technically this means that the @import rules will
  80. // _usually_(not always since there could be multiple style tags)
  81. // be the first ones in prod and generally later in dev
  82. // this shouldn't really matter in the real world though
  83. // @import is generally only used for font faces from google fonts and etc.
  84. // so while this could be technically correct then it would be slower and larger
  85. // for a tiny bit of correctness that won't matter in the real world
  86. isImportRule ? 0 : sheet.cssRules.length);
  87. } catch (e) {
  88. if (process.env.NODE_ENV !== 'production') {
  89. console.warn("There was a problem inserting the following rule: \"" + rule + "\"", e);
  90. }
  91. }
  92. } else {
  93. tag.appendChild(document.createTextNode(rule));
  94. }
  95. this.ctr++;
  96. };
  97. _proto.flush = function flush() {
  98. // $FlowFixMe
  99. this.tags.forEach(function (tag) {
  100. return tag.parentNode.removeChild(tag);
  101. });
  102. this.tags = [];
  103. this.ctr = 0;
  104. };
  105. return StyleSheet;
  106. }();
  107. exports.StyleSheet = StyleSheet;