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.esm.js 4.0KB

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