Reduce styled-jsx size in client bundle #32730
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
huozhi
requested review from
ijjk,
leerob,
shuding,
steven-tey and
timneutkens
as code owners
ijjk
added
examples
timneutkens
approved these changes
Dec 22, 2021
Stats from current PRDefault Build (Decrease detected ✓)General Overall decrease ✓
Page Load Tests Overall decrease
|
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.62 | 3.59 | -0.03 |
| / avg req/sec | 690.64 | 696.33 | +5.69 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.909 | 1.993 | |
| /error-in-render avg req/sec | 1309.48 | 1254.67 |
Client Bundles (main, webpack, commons) Overall decrease ✓
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| 450.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42.2 kB | 42.2 kB | ✓ |
| main-HASH.js gzip | 30.3 kB | 27 kB | -3.21 kB |
| webpack-HASH.js gzip | 1.45 kB | 1.45 kB | ✓ |
| Overall change | 74.1 kB | 70.9 kB | -3.21 kB |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.37 kB | 1.37 kB | ✓ |
| _error-HASH.js gzip | 194 B | 194 B | ✓ |
| amp-HASH.js gzip | 312 B | 312 B | ✓ |
| css-HASH.js gzip | 326 B | 326 B | ✓ |
| dynamic-HASH.js gzip | 2.37 kB | 2.37 kB | ✓ |
| head-HASH.js gzip | 350 B | 350 B | ✓ |
| hooks-HASH.js gzip | 919 B | 919 B | ✓ |
| image-HASH.js gzip | 4.73 kB | 4.73 kB | ✓ |
| index-HASH.js gzip | 263 B | 263 B | ✓ |
| link-HASH.js gzip | 2.13 kB | 2.13 kB | ✓ |
| routerDirect..HASH.js gzip | 321 B | 321 B | ✓ |
| script-HASH.js gzip | 383 B | 383 B | ✓ |
| withRouter-HASH.js gzip | 318 B | 318 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 14.1 kB | 14.1 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 459 B | 459 B | ✓ |
| Overall change | 459 B | 459 B | ✓ |
Rendered Page Sizes Overall increase ⚠️
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| index.html gzip | 532 B | 533 B | |
| link.html gzip | 546 B | 547 B | |
| withRouter.html gzip | 528 B | 528 B | ✓ |
| Overall change | 1.61 kB | 1.61 kB |
Diffs
Diff for main-HASH.js
@@ -467,7 +467,6 @@
__webpack_require__(37);
var _react = _interopRequireWildcard1(__webpack_require__(7294));
var _reactDom = _interopRequireDefault1(__webpack_require__(3935));
- var _styledJsx = __webpack_require__(8771);
var _headManagerContext = __webpack_require__(8404);
var _mitt = _interopRequireDefault1(__webpack_require__(5660));
var _routerContext = __webpack_require__(3462);
@@ -1218,11 +1217,7 @@
{
value: headManager
},
- /*#__PURE__*/ _react.default.createElement(
- _styledJsx.StyleRegistry,
- null,
- children
- )
+ children
)
)
);
@@ -7956,193 +7951,6 @@
/***/
},
- /***/ 7663: /***/ function(module) {
- var __dirname = "/";
- (function() {
- var e = {
- 162: function(e) {
- var t = (e.exports = {});
- var r;
- var n;
- function defaultSetTimout() {
- throw new Error("setTimeout has not been defined");
- }
- function defaultClearTimeout() {
- throw new Error("clearTimeout has not been defined");
- }
- (function() {
- try {
- if (typeof setTimeout === "function") {
- r = setTimeout;
- } else {
- r = defaultSetTimout;
- }
- } catch (e) {
- r = defaultSetTimout;
- }
- try {
- if (typeof clearTimeout === "function") {
- n = clearTimeout;
- } else {
- n = defaultClearTimeout;
- }
- } catch (e) {
- n = defaultClearTimeout;
- }
- })();
- function runTimeout(e) {
- if (r === setTimeout) {
- return setTimeout(e, 0);
- }
- if ((r === defaultSetTimout || !r) && setTimeout) {
- r = setTimeout;
- return setTimeout(e, 0);
- }
- try {
- return r(e, 0);
- } catch (t) {
- try {
- return r.call(null, e, 0);
- } catch (t) {
- return r.call(this, e, 0);
- }
- }
- }
- function runClearTimeout(e) {
- if (n === clearTimeout) {
- return clearTimeout(e);
- }
- if ((n === defaultClearTimeout || !n) && clearTimeout) {
- n = clearTimeout;
- return clearTimeout(e);
- }
- try {
- return n(e);
- } catch (t) {
- try {
- return n.call(null, e);
- } catch (t) {
- return n.call(this, e);
- }
- }
- }
- var i = [];
- var o = false;
- var u;
- var a = -1;
- function cleanUpNextTick() {
- if (!o || !u) {
- return;
- }
- o = false;
- if (u.length) {
- i = u.concat(i);
- } else {
- a = -1;
- }
- if (i.length) {
- drainQueue();
- }
- }
- function drainQueue() {
- if (o) {
- return;
- }
- var e = runTimeout(cleanUpNextTick);
- o = true;
- var t = i.length;
- while (t) {
- u = i;
- i = [];
- while (++a < t) {
- if (u) {
- u[a].run();
- }
- }
- a = -1;
- t = i.length;
- }
- u = null;
- o = false;
- runClearTimeout(e);
- }
- t.nextTick = function(e) {
- var t = new Array(arguments.length - 1);
- if (arguments.length > 1) {
- for (var r = 1; r < arguments.length; r++) {
- t[r - 1] = arguments[r];
- }
- }
- i.push(new Item(e, t));
- if (i.length === 1 && !o) {
- runTimeout(drainQueue);
- }
- };
- function Item(e, t) {
- this.fun = e;
- this.array = t;
- }
- Item.prototype.run = function() {
- this.fun.apply(null, this.array);
- };
- t.title = "browser";
- t.browser = true;
- t.env = {};
- t.argv = [];
- t.version = "";
- t.versions = {};
- function noop() {}
- t.on = noop;
- t.addListener = noop;
- t.once = noop;
- t.off = noop;
- t.removeListener = noop;
- t.removeAllListeners = noop;
- t.emit = noop;
- t.prependListener = noop;
- t.prependOnceListener = noop;
- t.listeners = function(e) {
- return [];
- };
- t.binding = function(e) {
- throw new Error("process.binding is not supported");
- };
- t.cwd = function() {
- return "/";
- };
- t.chdir = function(e) {
- throw new Error("process.chdir is not supported");
- };
- t.umask = function() {
- return 0;
- };
- }
- };
- var t = {};
- function __nccwpck_require__(r) {
- var n = t[r];
- if (n !== undefined) {
- return n.exports;
- }
- var i = (t[r] = { exports: {} });
- var o = true;
- try {
- e[r](i, i.exports, __nccwpck_require__);
- o = false;
- } finally {
- if (o) delete t[r];
- }
- return i.exports;
- }
- if (typeof __nccwpck_require__ !== "undefined")
- __nccwpck_require__.ab = __dirname + "/";
- var r = __nccwpck_require__(162);
- module.exports = r;
- })();
-
- /***/
- },
-
/***/ 4051: /***/ function(module) {
/**
* Copyright (c) 2014-present, Facebook, Inc.
@@ -9275,806 +9083,6 @@
/***/
},
- /***/ 9887: /***/ function(module) {
- "use strict";
-
- 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;
- }
-
- module.exports = hash;
-
- /***/
- },
-
- /***/ 5919: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.useStyleRegistry = exports.createStyleRegistry = exports.StyleRegistry = void 0;
-
- var _stylesheetRegistry = __webpack_require__(8122);
-
- exports.StyleRegistry = _stylesheetRegistry.StyleRegistry;
- exports.createStyleRegistry = _stylesheetRegistry.createStyleRegistry;
- exports.useStyleRegistry = _stylesheetRegistry.useStyleRegistry;
-
- /***/
- },
-
- /***/ 9035: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.computeId = computeId;
- exports.computeSelector = computeSelector;
-
- var _stringHash = _interopRequireDefault(__webpack_require__(9887));
-
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : { default: obj };
- }
-
- var sanitize = function sanitize(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-" + (0, _stringHash["default"])(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];
- }
-
- /***/
- },
-
- /***/ 4287: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
- /* provided dependency */ var process = __webpack_require__(7663);
-
- exports.__esModule = true;
- exports["default"] = void 0;
-
- 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;
- }
-
- /*
-Based on Glamor's sheet
-https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
-*/
- var isProd =
- typeof process !== "undefined" &&
- process.env &&
- "production" === "production";
-
- var isString = function isString(o) {
- return Object.prototype.toString.call(o) === "[object String]";
- };
-
- var StyleSheet = /*#__PURE__*/ (function() {
- function StyleSheet(_temp) {
- var _ref = _temp === void 0 ? {} : _temp,
- _ref$name = _ref.name,
- name = _ref$name === void 0 ? "stylesheet" : _ref$name,
- _ref$optimizeForSpeed = _ref.optimizeForSpeed,
- optimizeForSpeed =
- _ref$optimizeForSpeed === void 0 ? isProd : _ref$optimizeForSpeed,
- _ref$isBrowser = _ref.isBrowser,
- isBrowser =
- _ref$isBrowser === void 0
- ? typeof window !== "undefined"
- : _ref$isBrowser;
-
- invariant(isString(name), "`name` must be a string");
- this._name = name;
- this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}";
- invariant(
- typeof optimizeForSpeed === "boolean",
- "`optimizeForSpeed` must be a boolean"
- );
- this._optimizeForSpeed = optimizeForSpeed;
- this._isBrowser = isBrowser;
- this._serverSheet = undefined;
- this._tags = [];
- this._injected = false;
- this._rulesCount = 0;
- var node =
- this._isBrowser &&
- document.querySelector('meta[property="csp-nonce"]');
- this._nonce = node ? node.getAttribute("content") : null;
- }
-
- var _proto = StyleSheet.prototype;
-
- _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {
- invariant(
- typeof bool === "boolean",
- "`setOptimizeForSpeed` accepts a boolean"
- );
- invariant(
- 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(!this._injected, "sheet already injected");
- this._injected = true;
-
- if (this._isBrowser && 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 insertRule(rule, index) {
- if (typeof index === "number") {
- _this._serverSheet.cssRules[index] = {
- cssText: rule
- };
- } else {
- _this._serverSheet.cssRules.push({
- cssText: rule
- });
- }
-
- return index;
- },
- deleteRule: function deleteRule(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(isString(rule), "`insertRule` accepts only strings");
-
- if (!this._isBrowser) {
- 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 || !this._isBrowser) {
- var sheet = this._isBrowser ? 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(tag, "old rule at index `" + index + "` not found");
- tag.textContent = rule;
- }
-
- return index;
- };
-
- _proto.deleteRule = function deleteRule(index) {
- if (!this._isBrowser) {
- this._serverSheet.deleteRule(index);
-
- return;
- }
-
- if (this._optimizeForSpeed) {
- this.replaceRule(index, "");
- } else {
- var tag = this._tags[index];
- invariant(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 (this._isBrowser) {
- 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 _this2 = this;
-
- if (!this._isBrowser) {
- return this._serverSheet.cssRules;
- }
-
- return this._tags.reduce(function(rules, tag) {
- if (tag) {
- rules = rules.concat(
- Array.prototype.map.call(
- _this2.getSheetForTag(tag).cssRules,
- function(rule) {
- return rule.cssText === _this2._deletedRulePlaceholder
- ? null
- : rule;
- }
- )
- );
- } else {
- rules.push(null);
- }
-
- return rules;
- }, []);
- };
-
- _proto.makeStyleTag = function makeStyleTag(
- name,
- cssString,
- relativeToTag
- ) {
- if (cssString) {
- invariant(
- 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;
- })();
-
- exports["default"] = StyleSheet;
-
- function invariant(condition, message) {
- if (!condition) {
- throw new Error("StyleSheet: " + message + ".");
- }
- }
-
- /***/
- },
-
- /***/ 8122: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.createStyleRegistry = createStyleRegistry;
- exports.StyleRegistry = StyleRegistry;
- exports.useStyleRegistry = useStyleRegistry;
- exports.StyleSheetContext = exports.StyleSheetRegistry = void 0;
-
- var _react = _interopRequireWildcard(__webpack_require__(7294));
-
- var _stylesheet = _interopRequireDefault(__webpack_require__(4287));
-
- var _hash = __webpack_require__(9035);
-
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : { default: obj };
- }
-
- function _getRequireWildcardCache() {
- if (typeof WeakMap !== "function") return null;
- var cache = new WeakMap();
- _getRequireWildcardCache = function _getRequireWildcardCache() {
- return cache;
- };
- return cache;
- }
-
- function _interopRequireWildcard(obj) {
- if (obj && obj.__esModule) {
- return obj;
- }
- if (
- obj === null ||
- (typeof obj !== "object" && typeof obj !== "function")
- ) {
- return { default: obj };
- }
- var cache = _getRequireWildcardCache();
- if (cache && cache.has(obj)) {
- return cache.get(obj);
- }
- var newObj = {};
- var hasPropertyDescriptor =
- Object.defineProperty && Object.getOwnPropertyDescriptor;
- for (var key in obj) {
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
- var desc = hasPropertyDescriptor
- ? Object.getOwnPropertyDescriptor(obj, key)
- : null;
- if (desc && (desc.get || desc.set)) {
- Object.defineProperty(newObj, key, desc);
- } else {
- newObj[key] = obj[key];
- }
- }
- }
- newObj["default"] = obj;
- if (cache) {
- cache.set(obj, newObj);
- }
- return newObj;
- }
-
- function mapRulesToStyle(cssRules, options) {
- if (options === void 0) {
- options = {};
- }
-
- return cssRules.map(function(args) {
- var id = args[0];
- var css = args[1];
- return _react["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(_temp) {
- var _ref = _temp === void 0 ? {} : _temp,
- _ref$styleSheet = _ref.styleSheet,
- styleSheet = _ref$styleSheet === void 0 ? null : _ref$styleSheet,
- _ref$optimizeForSpeed = _ref.optimizeForSpeed,
- optimizeForSpeed =
- _ref$optimizeForSpeed === void 0 ? false : _ref$optimizeForSpeed,
- _ref$isBrowser = _ref.isBrowser,
- isBrowser =
- _ref$isBrowser === void 0
- ? typeof window !== "undefined"
- : _ref$isBrowser;
-
- this._sheet =
- styleSheet ||
- new _stylesheet["default"]({
- name: "styled-jsx",
- optimizeForSpeed: optimizeForSpeed
- });
-
- this._sheet.inject();
-
- if (styleSheet && typeof optimizeForSpeed === "boolean") {
- this._sheet.setOptimizeForSpeed(optimizeForSpeed);
-
- this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
- }
-
- this._isBrowser = isBrowser;
- 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 (this._isBrowser && !this._fromServer) {
- this._fromServer = this.selectFromServer();
- this._instancesCounts = Object.keys(this._fromServer).reduce(
- function(acc, tagName) {
- acc[tagName] = 0;
- return acc;
- },
- {}
- );
- }
-
- var _this$getIdAndRules = this.getIdAndRules(props),
- styleId = _this$getIdAndRules.styleId,
- rules = _this$getIdAndRules.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 _this2 = this;
-
- var _this$getIdAndRules2 = this.getIdAndRules(props),
- styleId = _this$getIdAndRules2.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 _this2._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 _this3 = this;
-
- var fromServer = this._fromServer
- ? Object.keys(this._fromServer).map(function(styleId) {
- return [styleId, _this3._fromServer[styleId]];
- })
- : [];
-
- var cssRules = this._sheet.cssRules();
-
- return fromServer.concat(
- Object.keys(this._indices)
- .map(function(styleId) {
- return [
- styleId,
- _this3._indices[styleId]
- .map(function(index) {
- return cssRules[index].cssText;
- })
- .join(_this3._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 = (0, _hash.computeId)(id, dynamic);
- return {
- styleId: styleId,
- rules: Array.isArray(css)
- ? css.map(function(rule) {
- return (0, _hash.computeSelector)(styleId, rule);
- })
- : [(0, _hash.computeSelector)(styleId, css)]
- };
- }
-
- return {
- styleId: (0, _hash.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;
- })();
-
- exports.StyleSheetRegistry = StyleSheetRegistry;
-
- function invariant(condition, message) {
- if (!condition) {
- throw new Error("StyleSheetRegistry: " + message + ".");
- }
- }
-
- var StyleSheetContext = (0, _react.createContext)(null);
- exports.StyleSheetContext = StyleSheetContext;
-
- function createStyleRegistry() {
- return new StyleSheetRegistry();
- }
-
- function StyleRegistry(_ref2) {
- var configuredRegistry = _ref2.registry,
- children = _ref2.children;
- var rootRegistry = (0, _react.useContext)(StyleSheetContext);
-
- var _useState = (0, _react.useState)(function() {
- return rootRegistry || configuredRegistry || createStyleRegistry();
- }),
- registry = _useState[0];
-
- return _react["default"].createElement(
- StyleSheetContext.Provider,
- {
- value: registry
- },
- children
- );
- }
-
- function useStyleRegistry() {
- return (0, _react.useContext)(StyleSheetContext);
- }
-
- /***/
- },
-
- /***/ 8771: /***/ function(
- module,
- __unused_webpack_exports,
- __webpack_require__
- ) {
- module.exports = __webpack_require__(5919);
-
- /***/
- },
-
/***/ 2431: /***/ function() {
/* (ignored) */
/***/Diff for index.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-e01d9e84ec169889.js"
+ src="/_next/static/chunks/main-f5b4e1a3c1160612.js"
defer=""
></script>
<scriptDiff for link.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-e01d9e84ec169889.js"
+ src="/_next/static/chunks/main-f5b4e1a3c1160612.js"
defer=""
></script>
<scriptDiff for withRouter.html
@@ -19,7 +19,7 @@
defer=""
></script>
<script
- src="/_next/static/chunks/main-e01d9e84ec169889.js"
+ src="/_next/static/chunks/main-f5b4e1a3c1160612.js"
defer=""
></script>
<scriptDefault Build with SWC (Increase detected ⚠️ )
General Overall decrease ✓
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| buildDuration | 21.9s | 21.4s | -482ms |
| buildDurationCached | 4s | 3.8s | -178ms |
| nodeModulesSize | 348 MB | 348 MB | -37 B |
Page Load Tests Overall increase ✓
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| / failed reqs | 0 | 0 | ✓ |
| / total time (seconds) | 3.608 | 3.513 | -0.1 |
| / avg req/sec | 692.94 | 711.72 | +18.78 |
| /error-in-render failed reqs | 0 | 0 | ✓ |
| /error-in-render total time (seconds) | 1.93 | 1.923 | -0.01 |
| /error-in-render avg req/sec | 1295.45 | 1300.34 | +4.89 |
Client Bundles (main, webpack, commons) Overall decrease ✓
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| 450.HASH.js gzip | 179 B | 179 B | ✓ |
| framework-HASH.js gzip | 42.3 kB | 42.3 kB | ✓ |
| main-HASH.js gzip | 30.4 kB | 27.2 kB | -3.2 kB |
| webpack-HASH.js gzip | 1.44 kB | 1.44 kB | ✓ |
| Overall change | 74.3 kB | 71.1 kB | -3.2 kB |
Legacy Client Bundles (polyfills)
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| polyfills-HASH.js gzip | 31 kB | 31 kB | ✓ |
| Overall change | 31 kB | 31 kB | ✓ |
Client Pages
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| _app-HASH.js gzip | 1.35 kB | 1.35 kB | ✓ |
| _error-HASH.js gzip | 180 B | 180 B | ✓ |
| amp-HASH.js gzip | 305 B | 305 B | ✓ |
| css-HASH.js gzip | 321 B | 321 B | ✓ |
| dynamic-HASH.js gzip | 2.36 kB | 2.36 kB | ✓ |
| head-HASH.js gzip | 342 B | 342 B | ✓ |
| hooks-HASH.js gzip | 906 B | 906 B | ✓ |
| image-HASH.js gzip | 4.75 kB | 4.75 kB | ✓ |
| index-HASH.js gzip | 256 B | 256 B | ✓ |
| link-HASH.js gzip | 2.19 kB | 2.19 kB | ✓ |
| routerDirect..HASH.js gzip | 314 B | 314 B | ✓ |
| script-HASH.js gzip | 375 B | 375 B | ✓ |
| withRouter-HASH.js gzip | 309 B | 309 B | ✓ |
| 85e02e95b279..7e3.css gzip | 107 B | 107 B | ✓ |
| Overall change | 14.1 kB | 14.1 kB | ✓ |
Client Build Manifests
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| _buildManifest.js gzip | 458 B | 458 B | ✓ |
| Overall change | 458 B | 458 B | ✓ |
Rendered Page Sizes Overall decrease ✓
| vercel/next.js canary | huozhi/next.js style-jsx-sz | Change | |
|---|---|---|---|
| index.html gzip | 531 B | 530 B | -1 B |
| link.html gzip | 545 B | 545 B | ✓ |
| withRouter.html gzip | 525 B | 525 B | ✓ |
| Overall change | 1.6 kB | 1.6 kB | -1 B |
Diffs
Diff for main-HASH.js
@@ -467,7 +467,6 @@
__webpack_require__(37);
var _react = _interopRequireWildcard1(__webpack_require__(7294));
var _reactDom = _interopRequireDefault1(__webpack_require__(3935));
- var _styledJsx = __webpack_require__(8771);
var _headManagerContext = __webpack_require__(8404);
var _mitt = _interopRequireDefault1(__webpack_require__(5660));
var _routerContext = __webpack_require__(3462);
@@ -1218,11 +1217,7 @@
{
value: headManager
},
- /*#__PURE__*/ _react.default.createElement(
- _styledJsx.StyleRegistry,
- null,
- children
- )
+ children
)
)
);
@@ -7956,193 +7951,6 @@
/***/
},
- /***/ 7663: /***/ function(module) {
- var __dirname = "/";
- (function() {
- var e = {
- 162: function(e) {
- var t = (e.exports = {});
- var r;
- var n;
- function defaultSetTimout() {
- throw new Error("setTimeout has not been defined");
- }
- function defaultClearTimeout() {
- throw new Error("clearTimeout has not been defined");
- }
- (function() {
- try {
- if (typeof setTimeout === "function") {
- r = setTimeout;
- } else {
- r = defaultSetTimout;
- }
- } catch (e) {
- r = defaultSetTimout;
- }
- try {
- if (typeof clearTimeout === "function") {
- n = clearTimeout;
- } else {
- n = defaultClearTimeout;
- }
- } catch (e) {
- n = defaultClearTimeout;
- }
- })();
- function runTimeout(e) {
- if (r === setTimeout) {
- return setTimeout(e, 0);
- }
- if ((r === defaultSetTimout || !r) && setTimeout) {
- r = setTimeout;
- return setTimeout(e, 0);
- }
- try {
- return r(e, 0);
- } catch (t) {
- try {
- return r.call(null, e, 0);
- } catch (t) {
- return r.call(this, e, 0);
- }
- }
- }
- function runClearTimeout(e) {
- if (n === clearTimeout) {
- return clearTimeout(e);
- }
- if ((n === defaultClearTimeout || !n) && clearTimeout) {
- n = clearTimeout;
- return clearTimeout(e);
- }
- try {
- return n(e);
- } catch (t) {
- try {
- return n.call(null, e);
- } catch (t) {
- return n.call(this, e);
- }
- }
- }
- var i = [];
- var o = false;
- var u;
- var a = -1;
- function cleanUpNextTick() {
- if (!o || !u) {
- return;
- }
- o = false;
- if (u.length) {
- i = u.concat(i);
- } else {
- a = -1;
- }
- if (i.length) {
- drainQueue();
- }
- }
- function drainQueue() {
- if (o) {
- return;
- }
- var e = runTimeout(cleanUpNextTick);
- o = true;
- var t = i.length;
- while (t) {
- u = i;
- i = [];
- while (++a < t) {
- if (u) {
- u[a].run();
- }
- }
- a = -1;
- t = i.length;
- }
- u = null;
- o = false;
- runClearTimeout(e);
- }
- t.nextTick = function(e) {
- var t = new Array(arguments.length - 1);
- if (arguments.length > 1) {
- for (var r = 1; r < arguments.length; r++) {
- t[r - 1] = arguments[r];
- }
- }
- i.push(new Item(e, t));
- if (i.length === 1 && !o) {
- runTimeout(drainQueue);
- }
- };
- function Item(e, t) {
- this.fun = e;
- this.array = t;
- }
- Item.prototype.run = function() {
- this.fun.apply(null, this.array);
- };
- t.title = "browser";
- t.browser = true;
- t.env = {};
- t.argv = [];
- t.version = "";
- t.versions = {};
- function noop() {}
- t.on = noop;
- t.addListener = noop;
- t.once = noop;
- t.off = noop;
- t.removeListener = noop;
- t.removeAllListeners = noop;
- t.emit = noop;
- t.prependListener = noop;
- t.prependOnceListener = noop;
- t.listeners = function(e) {
- return [];
- };
- t.binding = function(e) {
- throw new Error("process.binding is not supported");
- };
- t.cwd = function() {
- return "/";
- };
- t.chdir = function(e) {
- throw new Error("process.chdir is not supported");
- };
- t.umask = function() {
- return 0;
- };
- }
- };
- var t = {};
- function __nccwpck_require__(r) {
- var n = t[r];
- if (n !== undefined) {
- return n.exports;
- }
- var i = (t[r] = { exports: {} });
- var o = true;
- try {
- e[r](i, i.exports, __nccwpck_require__);
- o = false;
- } finally {
- if (o) delete t[r];
- }
- return i.exports;
- }
- if (typeof __nccwpck_require__ !== "undefined")
- __nccwpck_require__.ab = __dirname + "/";
- var r = __nccwpck_require__(162);
- module.exports = r;
- })();
-
- /***/
- },
-
/***/ 4051: /***/ function(module) {
/**
* Copyright (c) 2014-present, Facebook, Inc.
@@ -9275,806 +9083,6 @@
/***/
},
- /***/ 9887: /***/ function(module) {
- "use strict";
-
- 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;
- }
-
- module.exports = hash;
-
- /***/
- },
-
- /***/ 5919: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.useStyleRegistry = exports.createStyleRegistry = exports.StyleRegistry = void 0;
-
- var _stylesheetRegistry = __webpack_require__(8122);
-
- exports.StyleRegistry = _stylesheetRegistry.StyleRegistry;
- exports.createStyleRegistry = _stylesheetRegistry.createStyleRegistry;
- exports.useStyleRegistry = _stylesheetRegistry.useStyleRegistry;
-
- /***/
- },
-
- /***/ 9035: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.computeId = computeId;
- exports.computeSelector = computeSelector;
-
- var _stringHash = _interopRequireDefault(__webpack_require__(9887));
-
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : { default: obj };
- }
-
- var sanitize = function sanitize(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-" + (0, _stringHash["default"])(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];
- }
-
- /***/
- },
-
- /***/ 4287: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
- /* provided dependency */ var process = __webpack_require__(7663);
-
- exports.__esModule = true;
- exports["default"] = void 0;
-
- 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;
- }
-
- /*
-Based on Glamor's sheet
-https://github.com/threepointone/glamor/blob/667b480d31b3721a905021b26e1290ce92ca2879/src/sheet.js
-*/
- var isProd =
- typeof process !== "undefined" &&
- process.env &&
- "production" === "production";
-
- var isString = function isString(o) {
- return Object.prototype.toString.call(o) === "[object String]";
- };
-
- var StyleSheet = /*#__PURE__*/ (function() {
- function StyleSheet(_temp) {
- var _ref = _temp === void 0 ? {} : _temp,
- _ref$name = _ref.name,
- name = _ref$name === void 0 ? "stylesheet" : _ref$name,
- _ref$optimizeForSpeed = _ref.optimizeForSpeed,
- optimizeForSpeed =
- _ref$optimizeForSpeed === void 0 ? isProd : _ref$optimizeForSpeed,
- _ref$isBrowser = _ref.isBrowser,
- isBrowser =
- _ref$isBrowser === void 0
- ? typeof window !== "undefined"
- : _ref$isBrowser;
-
- invariant(isString(name), "`name` must be a string");
- this._name = name;
- this._deletedRulePlaceholder = "#" + name + "-deleted-rule____{}";
- invariant(
- typeof optimizeForSpeed === "boolean",
- "`optimizeForSpeed` must be a boolean"
- );
- this._optimizeForSpeed = optimizeForSpeed;
- this._isBrowser = isBrowser;
- this._serverSheet = undefined;
- this._tags = [];
- this._injected = false;
- this._rulesCount = 0;
- var node =
- this._isBrowser &&
- document.querySelector('meta[property="csp-nonce"]');
- this._nonce = node ? node.getAttribute("content") : null;
- }
-
- var _proto = StyleSheet.prototype;
-
- _proto.setOptimizeForSpeed = function setOptimizeForSpeed(bool) {
- invariant(
- typeof bool === "boolean",
- "`setOptimizeForSpeed` accepts a boolean"
- );
- invariant(
- 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(!this._injected, "sheet already injected");
- this._injected = true;
-
- if (this._isBrowser && 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 insertRule(rule, index) {
- if (typeof index === "number") {
- _this._serverSheet.cssRules[index] = {
- cssText: rule
- };
- } else {
- _this._serverSheet.cssRules.push({
- cssText: rule
- });
- }
-
- return index;
- },
- deleteRule: function deleteRule(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(isString(rule), "`insertRule` accepts only strings");
-
- if (!this._isBrowser) {
- 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 || !this._isBrowser) {
- var sheet = this._isBrowser ? 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(tag, "old rule at index `" + index + "` not found");
- tag.textContent = rule;
- }
-
- return index;
- };
-
- _proto.deleteRule = function deleteRule(index) {
- if (!this._isBrowser) {
- this._serverSheet.deleteRule(index);
-
- return;
- }
-
- if (this._optimizeForSpeed) {
- this.replaceRule(index, "");
- } else {
- var tag = this._tags[index];
- invariant(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 (this._isBrowser) {
- 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 _this2 = this;
-
- if (!this._isBrowser) {
- return this._serverSheet.cssRules;
- }
-
- return this._tags.reduce(function(rules, tag) {
- if (tag) {
- rules = rules.concat(
- Array.prototype.map.call(
- _this2.getSheetForTag(tag).cssRules,
- function(rule) {
- return rule.cssText === _this2._deletedRulePlaceholder
- ? null
- : rule;
- }
- )
- );
- } else {
- rules.push(null);
- }
-
- return rules;
- }, []);
- };
-
- _proto.makeStyleTag = function makeStyleTag(
- name,
- cssString,
- relativeToTag
- ) {
- if (cssString) {
- invariant(
- 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;
- })();
-
- exports["default"] = StyleSheet;
-
- function invariant(condition, message) {
- if (!condition) {
- throw new Error("StyleSheet: " + message + ".");
- }
- }
-
- /***/
- },
-
- /***/ 8122: /***/ function(
- __unused_webpack_module,
- exports,
- __webpack_require__
- ) {
- "use strict";
-
- exports.__esModule = true;
- exports.createStyleRegistry = createStyleRegistry;
- exports.StyleRegistry = StyleRegistry;
- exports.useStyleRegistry = useStyleRegistry;
- exports.StyleSheetContext = exports.StyleSheetRegistry = void 0;
-
- var _react = _interopRequireWildcard(__webpack_require__(7294));
-
- var _stylesheet = _interopRequireDefault(__webpack_require__(4287));
-
- var _hash = __webpack_require__(9035);
-
- function _interopRequireDefault(obj) {
- return obj && obj.__esModule ? obj : { default: obj };
- }
-
- function _getRequireWildcardCache() {
- if (typeof WeakMap !== "function") return null;
- var cache = new WeakMap();
- _getRequireWildcardCache = function _getRequireWildcardCache() {
- return cache;
- };
- return cache;
- }
-
- function _interopRequireWildcard(obj) {
- if (obj && obj.__esModule) {
- return obj;
- }
- if (
- obj === null ||
- (typeof obj !== "object" && typeof obj !== "function")
- ) {
- return { default: obj };
- }
- var cache = _getRequireWildcardCache();
- if (cache && cache.has(obj)) {
- return cache.get(obj);
- }
- var newObj = {};
- var hasPropertyDescriptor =
- Object.defineProperty && Object.getOwnPropertyDescriptor;
- for (var key in obj) {
- if (Object.prototype.hasOwnProperty.call(obj, key)) {
- var desc = hasPropertyDescriptor
- ? Object.getOwnPropertyDescriptor(obj, key)
- : null;
- if (desc && (desc.get || desc.set)) {
- Object.defineProperty(newObj, key, desc);
- } else {
- newObj[key] = obj[key];
- }
- }
- }
- newObj["default"] = obj;
- if (cache) {
- cache.set(obj, newObj);
- }
- return newObj;
- }
-
- function mapRulesToStyle(cssRules, options) {
- if (options === void 0) {
- options = {};
- }
-
- return cssRules.map(function(args) {
- var id = args[0];
- var css = args[1];
- return _react["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(_temp) {
- var _ref = _temp === void 0 ? {} : _temp,
- _ref$styleSheet = _ref.styleSheet,
- styleSheet = _ref$styleSheet === void 0 ? null : _ref$styleSheet,
- _ref$optimizeForSpeed = _ref.optimizeForSpeed,
- optimizeForSpeed =
- _ref$optimizeForSpeed === void 0 ? false : _ref$optimizeForSpeed,
- _ref$isBrowser = _ref.isBrowser,
- isBrowser =
- _ref$isBrowser === void 0
- ? typeof window !== "undefined"
- : _ref$isBrowser;
-
- this._sheet =
- styleSheet ||
- new _stylesheet["default"]({
- name: "styled-jsx",
- optimizeForSpeed: optimizeForSpeed
- });
-
- this._sheet.inject();
-
- if (styleSheet && typeof optimizeForSpeed === "boolean") {
- this._sheet.setOptimizeForSpeed(optimizeForSpeed);
-
- this._optimizeForSpeed = this._sheet.isOptimizeForSpeed();
- }
-
- this._isBrowser = isBrowser;
- 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 (this._isBrowser && !this._fromServer) {
- this._fromServer = this.selectFromServer();
- this._instancesCounts = Object.keys(this._fromServer).reduce(
- function(acc, tagName) {
- acc[tagName] = 0;
- return acc;
- },
- {}
- );
- }
-
- var _this$getIdAndRules = this.getIdAndRules(props),
- styleId = _this$getIdAndRules.styleId,
- rules = _this$getIdAndRules.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 _this2 = this;
-
- var _this$getIdAndRules2 = this.getIdAndRules(props),
- styleId = _this$getIdAndRules2.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 _this2._sheet.deleteRule(index);
- });
-
- de
Post job cleanup.
[command]/usr/bin/git version
git version 2.34.1
[command]/usr/bin/git config --local --name-only --get-regexp core\.sshCommand
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'core\.sshCommand' && git config --local --unset-all 'core.sshCommand' || :
[command]/usr/bin/git config --local --name-only --get-regexp http\.https\:\/\/github\.com\/\.extraheader
http.https://github.com/.extraheader
[command]/usr/bin/git config --local --unset-all http.https://github.com/.extraheader
[command]/usr/bin/git submodule foreach --recursive git config --local --name-only --get-regexp 'http\.https\:\/\/github\.com\/\.extraheader' && git config --local --unset-all 'http.https://github.com/.extraheader' || :
Cleaning up orphan processes
Commit: c197bccd37ecb83c52782f23c741cc27fd19161c
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We introduced the
StyleRegistryon server side to make it concurrent safe for requests. For client we can have only 1 registry since there's only 1 instance per browser window. Keep consistence with previous usageCloses #32417
Closes #30377
Revert change in #31357, it's not required anymore