[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit

Permalink
[Float][Fizz][Fiber]: Refactor <style> Resource implementation to gro…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
gnoff authored Mar 3, 2023
1 parent 5c633a4 commit 1f1f8eb
Show file tree
Hide file tree
Showing 11 changed files with 697 additions and 373 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -663,7 +663,7 @@ function styleTagPropsFromRawProps(
function getStyleKey(href: string) {
const limitedEscapedHref =
escapeSelectorAttributeValueInsideDoubleQuotes(href);
return `href="${limitedEscapedHref}"`;
return `href~="${limitedEscapedHref}"`;
}

function getStyleTagSelectorFromKey(key: string) {
Expand Down
Loading

0 comments on commit 1f1f8eb

Please sign in to comment.