1 line
4.2 KiB
JSON
1 line
4.2 KiB
JSON
{"ast":null,"code":"/*\n\nBased off glamor's StyleSheet, thanks Sunil ❤️\n\nhigh performance StyleSheet for css-in-js systems\n\n- uses multiple style tags behind the scenes for millions of rules\n- uses `insertRule` for appending in production for *much* faster performance\n\n// usage\n\nimport { StyleSheet } from '@emotion/sheet'\n\nlet styleSheet = new StyleSheet({ key: '', container: document.head })\n\nstyleSheet.insert('#box { border: 1px solid red; }')\n- appends a css rule into the stylesheet\n\nstyleSheet.flush()\n- empties the stylesheet of all its contents\n\n*/\n// $FlowFixMe\nfunction sheetForTag(tag) {\n if (tag.sheet) {\n // $FlowFixMe\n return tag.sheet;\n } // this weirdness brought to you by firefox\n\n /* istanbul ignore next */\n\n\n for (var i = 0; i < document.styleSheets.length; i++) {\n if (document.styleSheets[i].ownerNode === tag) {\n // $FlowFixMe\n return document.styleSheets[i];\n }\n }\n}\n\nfunction createStyleElement(options) {\n var tag = document.createElement('style');\n tag.setAttribute('data-emotion', options.key);\n\n if (options.nonce !== undefined) {\n tag.setAttribute('nonce', options.nonce);\n }\n\n tag.appendChild(document.createTextNode(''));\n return tag;\n}\n\nvar StyleSheet = /*#__PURE__*/function () {\n function StyleSheet(options) {\n this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;\n this.tags = [];\n this.ctr = 0;\n this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets\n\n this.key = options.key;\n this.container = options.container;\n this.before = null;\n }\n\n var _proto = StyleSheet.prototype;\n\n _proto.insert = function insert(rule) {\n // the max length is how many rules we have per style tag, it's 65000 in speedy mode\n // it's 1 in dev because we insert source maps that map a single rule to a location\n // and you can only have one source map per style tag\n if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {\n var _tag = createStyleElement(this);\n\n var before;\n\n if (this.tags.length === 0) {\n before = this.before;\n } else {\n before = this.tags[this.tags.length - 1].nextSibling;\n }\n\n this.container.insertBefore(_tag, before);\n this.tags.push(_tag);\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n if (this.isSpeedy) {\n var sheet = sheetForTag(tag);\n\n try {\n // this is a really hot path\n // we check the second character first because having \"i\"\n // as the second character will happen less often than\n // having \"@\" as the first character\n var isImportRule = rule.charCodeAt(1) === 105 && rule.charCodeAt(0) === 64; // this is the ultrafast version, works across browsers\n // the big drawback is that the css won't be editable in devtools\n\n sheet.insertRule(rule, // we need to insert @import rules before anything else\n // otherwise there will be an error\n // technically this means that the @import rules will\n // _usually_(not always since there could be multiple style tags)\n // be the first ones in prod and generally later in dev\n // this shouldn't really matter in the real world though\n // @import is generally only used for font faces from google fonts and etc.\n // so while this could be technically correct then it would be slower and larger\n // for a tiny bit of correctness that won't matter in the real world\n isImportRule ? 0 : sheet.cssRules.length);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\"There was a problem inserting the following rule: \\\"\" + rule + \"\\\"\", e);\n }\n }\n } else {\n tag.appendChild(document.createTextNode(rule));\n }\n\n this.ctr++;\n };\n\n _proto.flush = function flush() {\n // $FlowFixMe\n this.tags.forEach(function (tag) {\n return tag.parentNode.removeChild(tag);\n });\n this.tags = [];\n this.ctr = 0;\n };\n\n return StyleSheet;\n}();\n\nexport { StyleSheet };","map":null,"metadata":{},"sourceType":"module"} |