123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497 |
- 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 cssRules1 = this._sheet.cssRules();
- return fromServer.concat(Object.keys(this._indices).map(function(styleId) {
- return [
- styleId,
- _this._indices[styleId].map(function(index) {
- return cssRules1[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;
|