[Float][Fizz][Fiber]: Refactor <style> Resource implementation to gro…

…up on flush (#26280) There is a problem with <style> as resource. For css-in-js libs there may be an very large number of these hoistables being created. The number of style tags can grow quickly and to help reduce the prevalence of this FIzz now aggregates all style tags for a given precedence into a single tag. The client can 'hydrate' against these compound tags but currently on the client insertions are done individually. additionally drops the implementation where style tags are embedding in a template for one where `media="not all"` is set. The idea is to have the browser construct the underlying stylesheet eagerly which does not happen if the tag is embedded in a template Key Decision: One choice made in this PR is that we flush style tags eagerly even if a boundary is blocked that is the only thing that depends on that style rule. The reason we are starting with this implementation is that it allows a very condensed representation of the style resources. If we tracked which rules were used in which boundaries we would need a style resource for every rendered <style> tag. This could be problematic for css-in-js libs that might render hundreds or thousands of style tags. The tradeoff here is we slightly delay content reveal in some cases (we send extra bytes) but we have fewer DOM tags and faster SSR runtime DiffTrain build for [1f1f8eb](1f1f8eb)
facebook · Mar 3, 2023 · 9fd1e83 · 9fd1e83
1 parent 6611f7e
commit 9fd1e83
Show file tree

Hide file tree

Showing 32 changed files with 1,720 additions and 1,279 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-5c633a48f9bdc212e27ae026c74148b42cc47efb
+1f1f8eb559d064c5b1954e5dde7517d87d594e7a
diff --git a/compiled/facebook-www/REVISION_TRANSFORMS b/compiled/facebook-www/REVISION_TRANSFORMS
@@ -1 +1 @@
-5c633a48f9bdc212e27ae026c74148b42cc47efb
+1f1f8eb559d064c5b1954e5dde7517d87d594e7a
diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-classic-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-classic-1f1f8eb55-20230303";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-dev.modern.js b/compiled/facebook-www/React-dev.modern.js
@@ -27,7 +27,7 @@ if (
 }
           "use strict";
 
-var ReactVersion = "18.3.0-www-modern-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-modern-1f1f8eb55-20230303";
 
 // ATTENTION
 // When adding new symbols to this file,

diff --git a/compiled/facebook-www/React-prod.classic.js b/compiled/facebook-www/React-prod.classic.js
@@ -646,4 +646,4 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-classic-5c633a48f-20230303";
+exports.version = "18.3.0-www-classic-1f1f8eb55-20230303";
diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js
@@ -638,4 +638,4 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-modern-5c633a48f-20230303";
+exports.version = "18.3.0-www-modern-1f1f8eb55-20230303";
diff --git a/compiled/facebook-www/React-profiling.classic.js b/compiled/facebook-www/React-profiling.classic.js
@@ -657,7 +657,7 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-classic-5c633a48f-20230303";
+exports.version = "18.3.0-www-classic-1f1f8eb55-20230303";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js
@@ -649,7 +649,7 @@ exports.useSyncExternalStore = function (
   );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-www-modern-5c633a48f-20230303";
+exports.version = "18.3.0-www-modern-1f1f8eb55-20230303";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactART-dev.classic.js b/compiled/facebook-www/ReactART-dev.classic.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-classic-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-classic-1f1f8eb55-20230303";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-dev.modern.js b/compiled/facebook-www/ReactART-dev.modern.js
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
   return self;
 }
 
-var ReactVersion = "18.3.0-www-modern-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-modern-1f1f8eb55-20230303";
 
 var LegacyRoot = 0;
 var ConcurrentRoot = 1;

diff --git a/compiled/facebook-www/ReactART-prod.classic.js b/compiled/facebook-www/ReactART-prod.classic.js
@@ -9780,7 +9780,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-classic-5c633a48f-20230303",
+    version: "18.3.0-www-classic-1f1f8eb55-20230303",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1300 = {
@@ -9811,7 +9811,7 @@ var internals$jscomp$inline_1300 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1301 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactART-prod.modern.js b/compiled/facebook-www/ReactART-prod.modern.js
@@ -9445,7 +9445,7 @@ var slice = Array.prototype.slice,
       return null;
     },
     bundleType: 0,
-    version: "18.3.0-www-modern-5c633a48f-20230303",
+    version: "18.3.0-www-modern-1f1f8eb55-20230303",
     rendererPackageName: "react-art"
   };
 var internals$jscomp$inline_1280 = {
@@ -9476,7 +9476,7 @@ var internals$jscomp$inline_1280 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_1281 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -9947,7 +9947,7 @@ function styleTagPropsFromRawProps(rawProps) {
 
 function getStyleKey(href) {
   var limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-  return 'href="' + limitedEscapedHref + '"';
+  return 'href~="' + limitedEscapedHref + '"';
 }
 
 function getStyleTagSelectorFromKey(key) {
@@ -42108,7 +42108,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-classic-1f1f8eb55-20230303";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -14598,7 +14598,7 @@ function styleTagPropsFromRawProps(rawProps) {
 
 function getStyleKey(href) {
   var limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes(href);
-  return 'href="' + limitedEscapedHref + '"';
+  return 'href~="' + limitedEscapedHref + '"';
 }
 
 function getStyleTagSelectorFromKey(key) {
@@ -41712,7 +41712,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-5c633a48f-20230303";
+var ReactVersion = "18.3.0-www-modern-1f1f8eb55-20230303";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -2292,7 +2292,7 @@ function getResource(type, currentProps, pendingProps) {
   }
 }
 function getStyleKey(href) {
-  return 'href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
+  return 'href~="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
 }
 function getStylesheetSelectorFromKey(key) {
   return 'link[rel="stylesheet"][' + key + "]";
@@ -15490,7 +15490,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1741 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-5c633a48f-20230303",
+  version: "18.3.0-www-classic-1f1f8eb55-20230303",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2108 = {
@@ -15520,7 +15520,7 @@ var internals$jscomp$inline_2108 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2109 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15776,4 +15776,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-5c633a48f-20230303";
+exports.version = "18.3.0-next-1f1f8eb55-20230303";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -4576,7 +4576,7 @@ function getResource(type, currentProps, pendingProps) {
   }
 }
 function getStyleKey(href) {
-  return 'href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
+  return 'href~="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
 }
 function getStylesheetSelectorFromKey(key) {
   return 'link[rel="stylesheet"][' + key + "]";
@@ -15019,7 +15019,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1700 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-5c633a48f-20230303",
+  version: "18.3.0-www-modern-1f1f8eb55-20230303",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2072 = {
@@ -15050,7 +15050,7 @@ var internals$jscomp$inline_2072 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2073 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -15235,4 +15235,4 @@ exports.unstable_flushControlled = function (fn) {
   }
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-5c633a48f-20230303";
+exports.version = "18.3.0-next-1f1f8eb55-20230303";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -2440,7 +2440,7 @@ function getResource(type, currentProps, pendingProps) {
   }
 }
 function getStyleKey(href) {
-  return 'href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
+  return 'href~="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
 }
 function getStylesheetSelectorFromKey(key) {
   return 'link[rel="stylesheet"][' + key + "]";
@@ -16267,7 +16267,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1821 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-5c633a48f-20230303",
+  version: "18.3.0-www-classic-1f1f8eb55-20230303",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -16311,7 +16311,7 @@ var devToolsConfig$jscomp$inline_1821 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -16554,7 +16554,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-5c633a48f-20230303";
+exports.version = "18.3.0-next-1f1f8eb55-20230303";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -4720,7 +4720,7 @@ function getResource(type, currentProps, pendingProps) {
   }
 }
 function getStyleKey(href) {
-  return 'href="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
+  return 'href~="' + escapeSelectorAttributeValueInsideDoubleQuotes(href) + '"';
 }
 function getStylesheetSelectorFromKey(key) {
   return 'link[rel="stylesheet"][' + key + "]";
@@ -15786,7 +15786,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1780 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-5c633a48f-20230303",
+  version: "18.3.0-www-modern-1f1f8eb55-20230303",
   rendererPackageName: "react-dom"
 };
 (function (internals) {
@@ -15831,7 +15831,7 @@ var devToolsConfig$jscomp$inline_1780 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-5c633a48f-20230303"
+  reconcilerVersion: "18.3.0-next-1f1f8eb55-20230303"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
 exports.createPortal = function (children, container) {
@@ -16003,7 +16003,7 @@ exports.unstable_flushControlled = function (fn) {
   }
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-next-5c633a48f-20230303";
+exports.version = "18.3.0-next-1f1f8eb55-20230303";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (