Skip to content

feat: Render theme CSS variables in SSR style element #27277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
ling1726 merged 29 commits into from
Mar 23, 2023
Merged

feat: Render theme CSS variables in SSR style element #27277

ling1726 merged 29 commits into from
Mar 23, 2023

Conversation

@ling1726
Copy link
Contributor

@ling1726 ling1726 commented Mar 21, 2023 •
edited
Loading

Adds a new serverStyle slot to the FluentProvider that is only rendered in the server when wrapped by an SSRProvider.

Also updates useFluentProviderThemeTag to return the CSS rule that contains all CSS variables.

useFluentProviderThemeTag will now move any theme style elements from body to head on first render (done to avoid hydration errors). The insertion effect will check to see if its corresponding theme style element has already been rendered by SSR based on the styleTagId.

This PR makes use of dangerouslySetInnerHTML since react will output certain characters in unicode which can result in invalid CSS, this approach is also taken by Emotion

Fixes #25425

@ling1726
feat: Render theme CSS variables in new SSR style slot
4735d90 
Adds a new `serverStyle` slot to the `FluentProvider` that is only
rendered when the provider is a child of an `SSRProvider`.

Also updates `useFluentProviderThemeTag` to return the CSS rule that
contains all CSS variables.

This PR makes use of dangerous HTML, since react will output certain
characters in unicode which can result in invalid CSS, [this approach is
also taken by Emotion](https://github.com/emotion-js/emotion/blob/89b6dbb3c13d49ef1fa3d88888672d810853f05a/packages/react/src/emotion-element.js#L72-L78)
@github-actions github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 21, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 21, 2023 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: Button, FluentProvider & webLightTheme		 67.495 kB
18.211 kB		 67.994 kB
18.395 kB		 499 B
184 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 206.901 kB
57.339 kB		 207.4 kB
57.516 kB		 499 B
177 B
react-components
react-components: FluentProvider & webLightTheme		 38.32 kB
12.15 kB		 38.819 kB
12.351 kB		 499 B
201 B
react-provider
FluentProvider		 20.267 kB
6.927 kB		 20.766 kB
7.119 kB		 499 B
192 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-portal-compat
PortalCompatProvider		 6.446 kB
2.185 kB
🤖 This report was generated against be0ca69899300abe3c8478c435e0f6837138479b

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 21, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
FluentProviderWithTheme virtual-rerender 237 279 10 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 952 884 5000
Button mount 575 584 5000
Field mount 1655 1603 5000
FluentProvider mount 1135 1170 5000
FluentProviderWithTheme mount 306 322 10
FluentProviderWithTheme virtual-rerender 237 279 10 Possible regression
FluentProviderWithTheme virtual-rerender-with-unmount 303 297 10
InfoButton mount 209 211 5000
MakeStyles mount 1336 1316 50000
Persona mount 2342 2240 5000
SpinButton mount 2008 1983 5000

@size-auditor
Copy link

size-auditor bot commented Mar 21, 2023 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: be0ca69899300abe3c8478c435e0f6837138479b (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 21, 2023 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3b7afda:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 21, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@ling1726 ling1726 marked this pull request as ready for review March 22, 2023 12:49
@ling1726 ling1726 requested a review from a team as a code owner March 22, 2023 12:49
@ling1726 ling1726 requested a review from layershifter March 22, 2023 12:49
@ling1726 ling1726 requested a review from layershifter March 22, 2023 13:22
@ling1726 ling1726 changed the title feat: Render theme CSS variables in new SSR style slot feat: Render theme CSS variables in SSR style element Mar 22, 2023
layershifter
layershifter reviewed Mar 23, 2023
View reviewed changes
@ling1726 ling1726 requested a review from layershifter March 23, 2023 11:18
@ling1726 ling1726 requested a review from layershifter March 23, 2023 13:19
@ling1726 ling1726 merged commit 64d2ec1 into microsoft:master Mar 23, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 27, 2023
@marcosmoura
Merge branch 'master' into marcosmoura/feat/drawer-component
3467654 
* master: (47 commits)
  fix: Fix vertical alignment of inline Checkbox when checked vs. unchecked (microsoft#27324)
  applying package updates
  Fix: Revert microsoft#26931 change due to new bug it introduced (microsoft#27323)
  chore(react-infobutton): Renaming content slot to info (microsoft#27316)
  applying package updates
  Fix bad release mismatch of react-select (microsoft#27321)
  applying package updates
  Fix react-combobox mismatch after bad release (microsoft#27319)
  docs: add section about media query sorting (microsoft#27307)
  applying package updates
  fix: sync packages and changefiles after bad release (microsoft#27317)
  applying package updates
  chore(react-datepicker-compat): Cleanup types, unused code, and restore utils tests (microsoft#27297)
  [Fluent 2 Theme] Fixing link color in dark theme (microsoft#27203)
  Tree documentation and stories (microsoft#27270)
  feat: Render theme CSS variables in SSR style element (microsoft#27277)
  chore (scripts): update create-package plop templates to use swc/helpers in deps (microsoft#27286)
  fix(DialogContent): adds padding to allow focus visibility (microsoft#27248)
  Adding Card component style hooks to shared context (microsoft#27295)
  Virtualizer: Static scroll hooks and embedded scrollview (microsoft#26985)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@layershifter layershifter layershifter approved these changes

Assignees

@behowell behowell

Labels

Component: FluentProvider

Projects

None yet

Milestone

March Project Cycle Q1 2023

Development

Successfully merging this pull request may close these issues.

[Bug]: FluentProvider stylesheet (CSS vars for theme) are not server-side rendered

5 participants

@ling1726 @fabricteam @layershifter @behowell @msft-fluent-ui-bot