Spaces:
Running
Running
| require('client-only'); | |
| var React = require('react'); | |
| function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | |
| var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | |
| /* | |
| Based on Glamor's sheet | |
| https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js | |
| */ function _defineProperties(target, props) { | |
| for(var i = 0; i < props.length; i++){ | |
| var descriptor = props[i]; | |
| descriptor.enumerable = descriptor.enumerable || false; | |
| descriptor.configurable = true; | |
| if ("value" in descriptor) descriptor.writable = true; | |
| Object.defineProperty(target, descriptor.key, descriptor); | |
| } | |
| } | |
| function _createClass(Constructor, protoProps, staticProps) { | |
| if (protoProps) _defineProperties(Constructor.prototype, protoProps); | |
| if (staticProps) _defineProperties(Constructor, staticProps); | |
| return Constructor; | |
| } | |
| var isProd = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production"; | |
| var isString = function(o) { | |
| return Object.prototype.toString.call(o) === "[object String]"; | |
| }; | |
| var StyleSheet = /*#__PURE__*/ function() { | |
| function StyleSheet(param) { | |
| var ref = param === void 0 ? {} : param, _name = ref.name, name = _name === void 0 ? "stylesheet" : _name, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? isProd : _optimizeForSpeed; | |
| invariant$1(isString(name), "`name` must be a string"); | |
| this._name = name; | |
| this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}"; | |
| invariant$1(typeof optimizeForSpeed === "boolean", "`optimizeForSpeed` must be a boolean"); | |
| this._optimizeForSpeed = optimizeForSpeed; | |
| this._serverSheet = undefined; | |
| this._tags = []; | |
| this._injected = false; | |
| this._rulesCount = 0; | |
| var node = typeof window !== "undefined" && document.querySelector('meta[property="csp-nonce"]'); | |
| this._nonce = node ? node.getAttribute("content") : null; | |
| } | |
| var _proto = StyleSheet.prototype; | |
| _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) { | |
| invariant$1(typeof bool === "boolean", "`setOptimizeForSpeed` accepts a boolean"); | |
| invariant$1(this._rulesCount === 0, "optimizeForSpeed cannot be when rules have already been inserted"); | |
| this.flush(); | |
| this._optimizeForSpeed = bool; | |
| this.inject(); | |
| }; | |
| _proto.isOptimizeForSpeed = function isOptimizeForSpeed() { | |
| return this._optimizeForSpeed; | |
| }; | |
| _proto.inject = function inject() { | |
| var _this = this; | |
| invariant$1(!this._injected, "sheet already injected"); | |
| this._injected = true; | |
| if (typeof window !== "undefined" && this._optimizeForSpeed) { | |
| this._tags[0] = this.makeStyleTag(this._name); | |
| this._optimizeForSpeed = "insertRule" in this.getSheet(); | |
| if (!this._optimizeForSpeed) { | |
| if (!isProd) { | |
| console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."); | |
| } | |
| this.flush(); | |
| this._injected = true; | |
| } | |
| return; | |
| } | |
| this._serverSheet = { | |
| cssRules: [], | |
| insertRule: function(rule, index) { | |
| if (typeof index === "number") { | |
| _this._serverSheet.cssRules[index] = { | |
| cssText: rule | |
| }; | |
| } else { | |
| _this._serverSheet.cssRules.push({ | |
| cssText: rule | |
| }); | |
| } | |
| return index; | |
| }, | |
| deleteRule: function(index) { | |
| _this._serverSheet.cssRules[index] = null; | |
| } | |
| }; | |
| }; | |
| _proto.getSheetForTag = function getSheetForTag(tag) { | |
| if (tag.sheet) { | |
| return tag.sheet; | |
| } | |
| // this weirdness brought to you by firefox | |
| for(var i = 0; i < document.styleSheets.length; i++){ | |
| if (document.styleSheets[i].ownerNode === tag) { | |
| return document.styleSheets[i]; | |
| } | |
| } | |
| }; | |
| _proto.getSheet = function getSheet() { | |
| return this.getSheetForTag(this._tags[this._tags.length - 1]); | |
| }; | |
| _proto.insertRule = function insertRule(rule, index) { | |
| invariant$1(isString(rule), "`insertRule` accepts only strings"); | |
| if (typeof window === "undefined") { | |
| if (typeof index !== "number") { | |
| index = this._serverSheet.cssRules.length; | |
| } | |
| this._serverSheet.insertRule(rule, index); | |
| return this._rulesCount++; | |
| } | |
| if (this._optimizeForSpeed) { | |
| var sheet = this.getSheet(); | |
| if (typeof index !== "number") { | |
| index = sheet.cssRules.length; | |
| } | |
| // this weirdness for perf, and chrome's weird bug | |
| // https://stackoverflow.com/questions/20007992/chrome-suddenly-stopped-accepting-insertrule | |
| try { | |
| sheet.insertRule(rule, index); | |
| } catch (error) { | |
| if (!isProd) { | |
| console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | |
| } | |
| return -1; | |
| } | |
| } else { | |
| var insertionPoint = this._tags[index]; | |
| this._tags.push(this.makeStyleTag(this._name, rule, insertionPoint)); | |
| } | |
| return this._rulesCount++; | |
| }; | |
| _proto.replaceRule = function replaceRule(index, rule) { | |
| if (this._optimizeForSpeed || typeof window === "undefined") { | |
| var sheet = typeof window !== "undefined" ? this.getSheet() : this._serverSheet; | |
| if (!rule.trim()) { | |
| rule = this._deletedRulePlaceholder; | |
| } | |
| if (!sheet.cssRules[index]) { | |
| // @TBD Should we throw an error? | |
| return index; | |
| } | |
| sheet.deleteRule(index); | |
| try { | |
| sheet.insertRule(rule, index); | |
| } catch (error) { | |
| if (!isProd) { | |
| console.warn("StyleSheet: illegal rule: \n\n" + rule + "\n\nSee https://stackoverflow.com/q/20007992 for more info"); | |
| } | |
| // In order to preserve the indices we insert a deleteRulePlaceholder | |
| sheet.insertRule(this._deletedRulePlaceholder, index); | |
| } | |
| } else { | |
| var tag = this._tags[index]; | |
| invariant$1(tag, "old rule at index `" + index + "` not found"); | |
| tag.textContent = rule; | |
| } | |
| return index; | |
| }; | |
| _proto.deleteRule = function deleteRule(index) { | |
| if (typeof window === "undefined") { | |
| this._serverSheet.deleteRule(index); | |
| return; | |
| } | |
| if (this._optimizeForSpeed) { | |
| this.replaceRule(index, ""); | |
| } else { | |
| var tag = this._tags[index]; | |
| invariant$1(tag, "rule at index `" + index + "` not found"); | |
| tag.parentNode.removeChild(tag); | |
| this._tags[index] = null; | |
| } | |
| }; | |
| _proto.flush = function flush() { | |
| this._injected = false; | |
| this._rulesCount = 0; | |
| if (typeof window !== "undefined") { | |
| this._tags.forEach(function(tag) { | |
| return tag && tag.parentNode.removeChild(tag); | |
| }); | |
| this._tags = []; | |
| } else { | |
| // simpler on server | |
| this._serverSheet.cssRules = []; | |
| } | |
| }; | |
| _proto.cssRules = function cssRules() { | |
| var _this = this; | |
| if (typeof window === "undefined") { | |
| return this._serverSheet.cssRules; | |
| } | |
| return this._tags.reduce(function(rules, tag) { | |
| if (tag) { | |
| rules = rules.concat(Array.prototype.map.call(_this.getSheetForTag(tag).cssRules, function(rule) { | |
| return rule.cssText === _this._deletedRulePlaceholder ? null : rule; | |
| })); | |
| } else { | |
| rules.push(null); | |
| } | |
| return rules; | |
| }, []); | |
| }; | |
| _proto.makeStyleTag = function makeStyleTag(name, cssString, relativeToTag) { | |
| if (cssString) { | |
| invariant$1(isString(cssString), "makeStyleTag accepts only strings as second parameter"); | |
| } | |
| var tag = document.createElement("style"); | |
| if (this._nonce) tag.setAttribute("nonce", this._nonce); | |
| tag.type = "text/css"; | |
| tag.setAttribute("data-" + name, ""); | |
| if (cssString) { | |
| tag.appendChild(document.createTextNode(cssString)); | |
| } | |
| var head = document.head || document.getElementsByTagName("head")[0]; | |
| if (relativeToTag) { | |
| head.insertBefore(tag, relativeToTag); | |
| } else { | |
| head.appendChild(tag); | |
| } | |
| return tag; | |
| }; | |
| _createClass(StyleSheet, [ | |
| { | |
| key: "length", | |
| get: function get() { | |
| return this._rulesCount; | |
| } | |
| } | |
| ]); | |
| return StyleSheet; | |
| }(); | |
| function invariant$1(condition, message) { | |
| if (!condition) { | |
| throw new Error("StyleSheet: " + message + "."); | |
| } | |
| } | |
| function hash(str) { | |
| var _$hash = 5381, i = str.length; | |
| while(i){ | |
| _$hash = _$hash * 33 ^ str.charCodeAt(--i); | |
| } | |
| /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed | |
| * integers. Since we want the results to be always positive, convert the | |
| * signed int to an unsigned by doing an unsigned bitshift. */ return _$hash >>> 0; | |
| } | |
| var stringHash = hash; | |
| var sanitize = function(rule) { | |
| return rule.replace(/\/style/gi, "\\/style"); | |
| }; | |
| var cache = {}; | |
| /** | |
| * computeId | |
| * | |
| * Compute and memoize a jsx id from a basedId and optionally props. | |
| */ function computeId(baseId, props) { | |
| if (!props) { | |
| return "jsx-" + baseId; | |
| } | |
| var propsToString = String(props); | |
| var key = baseId + propsToString; | |
| if (!cache[key]) { | |
| cache[key] = "jsx-" + stringHash(baseId + "-" + propsToString); | |
| } | |
| return cache[key]; | |
| } | |
| /** | |
| * computeSelector | |
| * | |
| * Compute and memoize dynamic selectors. | |
| */ function computeSelector(id, css) { | |
| var selectoPlaceholderRegexp = /__jsx-style-dynamic-selector/g; | |
| // Sanitize SSR-ed CSS. | |
| // Client side code doesn't need to be sanitized since we use | |
| // document.createTextNode (dev) and the CSSOM api sheet.insertRule (prod). | |
| if (typeof window === "undefined") { | |
| css = sanitize(css); | |
| } | |
| var idcss = id + css; | |
| if (!cache[idcss]) { | |
| cache[idcss] = css.replace(selectoPlaceholderRegexp, id); | |
| } | |
| return cache[idcss]; | |
| } | |
| function mapRulesToStyle(cssRules, options) { | |
| if (options === void 0) options = {}; | |
| return cssRules.map(function(args) { | |
| var id = args[0]; | |
| var css = args[1]; | |
| return /*#__PURE__*/ React__default["default"].createElement("style", { | |
| id: "__" + id, | |
| // Avoid warnings upon render with a key | |
| key: "__" + id, | |
| nonce: options.nonce ? options.nonce : undefined, | |
| dangerouslySetInnerHTML: { | |
| __html: css | |
| } | |
| }); | |
| }); | |
| } | |
| var StyleSheetRegistry = /*#__PURE__*/ function() { | |
| function StyleSheetRegistry(param) { | |
| var ref = param === void 0 ? {} : param, _styleSheet = ref.styleSheet, styleSheet = _styleSheet === void 0 ? null : _styleSheet, _optimizeForSpeed = ref.optimizeForSpeed, optimizeForSpeed = _optimizeForSpeed === void 0 ? false : _optimizeForSpeed; | |
| this._sheet = styleSheet || new StyleSheet({ | |
| name: "styled-jsx", | |
| optimizeForSpeed: optimizeForSpeed | |
| }); | |
| this._sheet.inject(); | |
| if (styleSheet && typeof optimizeForSpeed === "boolean") { | |
| this._sheet.setOptimizeForSpeed(optimizeForSpeed); | |
| this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | |
| } | |
| this._fromServer = undefined; | |
| this._indices = {}; | |
| this._instancesCounts = {}; | |
| } | |
| var _proto = StyleSheetRegistry.prototype; | |
| _proto.add = function add(props) { | |
| var _this = this; | |
| if (undefined === this._optimizeForSpeed) { | |
| this._optimizeForSpeed = Array.isArray(props.children); | |
| this._sheet.setOptimizeForSpeed(this._optimizeForSpeed); | |
| this._optimizeForSpeed = this._sheet.isOptimizeForSpeed(); | |
| } | |
| if (typeof window !== "undefined" && !this._fromServer) { | |
| this._fromServer = this.selectFromServer(); | |
| this._instancesCounts = Object.keys(this._fromServer).reduce(function(acc, tagName) { | |
| acc[tagName] = 0; | |
| return acc; | |
| }, {}); | |
| } | |
| var ref = this.getIdAndRules(props), styleId = ref.styleId, rules = ref.rules; | |
| // Deduping: just increase the instances count. | |
| if (styleId in this._instancesCounts) { | |
| this._instancesCounts[styleId] += 1; | |
| return; | |
| } | |
| var indices = rules.map(function(rule) { | |
| return _this._sheet.insertRule(rule); | |
| })// Filter out invalid rules | |
| .filter(function(index) { | |
| return index !== -1; | |
| }); | |
| this._indices[styleId] = indices; | |
| this._instancesCounts[styleId] = 1; | |
| }; | |
| _proto.remove = function remove(props) { | |
| var _this = this; | |
| var styleId = this.getIdAndRules(props).styleId; | |
| invariant(styleId in this._instancesCounts, "styleId: `" + styleId + "` not found"); | |
| this._instancesCounts[styleId] -= 1; | |
| if (this._instancesCounts[styleId] < 1) { | |
| var tagFromServer = this._fromServer && this._fromServer[styleId]; | |
| if (tagFromServer) { | |
| tagFromServer.parentNode.removeChild(tagFromServer); | |
| delete this._fromServer[styleId]; | |
| } else { | |
| this._indices[styleId].forEach(function(index) { | |
| return _this._sheet.deleteRule(index); | |
| }); | |
| delete this._indices[styleId]; | |
| } | |
| delete this._instancesCounts[styleId]; | |
| } | |
| }; | |
| _proto.update = function update(props, nextProps) { | |
| this.add(nextProps); | |
| this.remove(props); | |
| }; | |
| _proto.flush = function flush() { | |
| this._sheet.flush(); | |
| this._sheet.inject(); | |
| this._fromServer = undefined; | |
| this._indices = {}; | |
| this._instancesCounts = {}; | |
| }; | |
| _proto.cssRules = function cssRules() { | |
| var _this = this; | |
| var fromServer = this._fromServer ? Object.keys(this._fromServer).map(function(styleId) { | |
| return [ | |
| styleId, | |
| _this._fromServer[styleId] | |
| ]; | |
| }) : []; | |
| var cssRules = this._sheet.cssRules(); | |
| return fromServer.concat(Object.keys(this._indices).map(function(styleId) { | |
| return [ | |
| styleId, | |
| _this._indices[styleId].map(function(index) { | |
| return cssRules[index].cssText; | |
| }).join(_this._optimizeForSpeed ? "" : "\n") | |
| ]; | |
| })// filter out empty rules | |
| .filter(function(rule) { | |
| return Boolean(rule[1]); | |
| })); | |
| }; | |
| _proto.styles = function styles(options) { | |
| return mapRulesToStyle(this.cssRules(), options); | |
| }; | |
| _proto.getIdAndRules = function getIdAndRules(props) { | |
| var css = props.children, dynamic = props.dynamic, id = props.id; | |
| if (dynamic) { | |
| var styleId = computeId(id, dynamic); | |
| return { | |
| styleId: styleId, | |
| rules: Array.isArray(css) ? css.map(function(rule) { | |
| return computeSelector(styleId, rule); | |
| }) : [ | |
| computeSelector(styleId, css) | |
| ] | |
| }; | |
| } | |
| return { | |
| styleId: computeId(id), | |
| rules: Array.isArray(css) ? css : [ | |
| css | |
| ] | |
| }; | |
| }; | |
| /** | |
| * selectFromServer | |
| * | |
| * Collects style tags from the document with id __jsx-XXX | |
| */ _proto.selectFromServer = function selectFromServer() { | |
| var elements = Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]')); | |
| return elements.reduce(function(acc, element) { | |
| var id = element.id.slice(2); | |
| acc[id] = element; | |
| return acc; | |
| }, {}); | |
| }; | |
| return StyleSheetRegistry; | |
| }(); | |
| function invariant(condition, message) { | |
| if (!condition) { | |
| throw new Error("StyleSheetRegistry: " + message + "."); | |
| } | |
| } | |
| var StyleSheetContext = /*#__PURE__*/ React.createContext(null); | |
| StyleSheetContext.displayName = "StyleSheetContext"; | |
| function createStyleRegistry() { | |
| return new StyleSheetRegistry(); | |
| } | |
| function StyleRegistry(param) { | |
| var configuredRegistry = param.registry, children = param.children; | |
| var rootRegistry = React.useContext(StyleSheetContext); | |
| var ref = React.useState(function() { | |
| return rootRegistry || configuredRegistry || createStyleRegistry(); | |
| }), registry = ref[0]; | |
| return /*#__PURE__*/ React__default["default"].createElement(StyleSheetContext.Provider, { | |
| value: registry | |
| }, children); | |
| } | |
| function useStyleRegistry() { | |
| return React.useContext(StyleSheetContext); | |
| } | |
| // Opt-into the new `useInsertionEffect` API in React 18, fallback to `useLayoutEffect`. | |
| // https://github.com/reactwg/react-18/discussions/110 | |
| var useInsertionEffect = React__default["default"].useInsertionEffect || React__default["default"].useLayoutEffect; | |
| var defaultRegistry = typeof window !== "undefined" ? createStyleRegistry() : undefined; | |
| function JSXStyle(props) { | |
| var registry = defaultRegistry ? defaultRegistry : useStyleRegistry(); | |
| // If `registry` does not exist, we do nothing here. | |
| if (!registry) { | |
| return null; | |
| } | |
| if (typeof window === "undefined") { | |
| registry.add(props); | |
| return null; | |
| } | |
| useInsertionEffect(function() { | |
| registry.add(props); | |
| return function() { | |
| registry.remove(props); | |
| }; | |
| // props.children can be string[], will be striped since id is identical | |
| }, [ | |
| props.id, | |
| String(props.dynamic) | |
| ]); | |
| return null; | |
| } | |
| JSXStyle.dynamic = function(info) { | |
| return info.map(function(tagInfo) { | |
| var baseId = tagInfo[0]; | |
| var props = tagInfo[1]; | |
| return computeId(baseId, props); | |
| }).join(" "); | |
| }; | |
| exports.StyleRegistry = StyleRegistry; | |
| exports.createStyleRegistry = createStyleRegistry; | |
| exports.style = JSXStyle; | |
| exports.useStyleRegistry = useStyleRegistry; | |