feat: style deduplication

[divmain]

Details

This implements style deduplication in SSRv2 (see RFC #136 for more info). With this change, an <lwc-style> tag is inserted alongside the first instance of a given component's <style> tag. In subsequent renders of that component, only the <lwc-style> tag is present in the generated markup. Under the hood, each instance of the component shares a constructed stylesheet, making it so that the browser does not need to repeatedly parse and apply the same CSS (which is expensive for large stylesheets). This constitutes a performance improvement.

In order to take advantage of the <lwc-style> perf improvement, the document must first register the StyleDeduplicator custom element (not an LWC). This can be accomplished by calling registerLwcStyleComponent which is provided in the new top-level LWC package @lwc/ssr-client-utils.

Style deduplication is opt-in. It is enabled in our tests for SSRv2. But you must opt-in when calling serverSideRenderComponent. That function now has the following signature:

export async function serverSideRenderComponent(
    tagName: string,
    Component: ComponentWithGenerateMarkup,
    props: Properties = {},
    styleDedupePrefix = '',
    styleDedupeIsEnabled = false,
    mode: CompilationMode = DEFAULT_SSR_MODE
): Promise<string>

The styleDedupePrefix must be provided if more than one "island" of SSR'd content will be present in a single HTML document. If not supplied and multiple islands are rendered on the page, there will be conflicts between the style identifiers in those islands.

Does this pull request introduce a breaking change?

• 😮‍💨 No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

• 🔬 Yes, it does include an observable change.

GUS work item

W-17381768

[divmain]

Downstream failure is unrelated to this PR.