Continued styling convergence

[jurokapsiar]

Goals

• Verify makeStyles-next is performant enough
• Make it production ready

Tasks

• find a good name
• makeStyles
• measure perf in TMP @miroslavstastny
• calling roster
• test in Office? @xugao
• ribbon
• confirm with David
• make makeStyles production ready @layershifter
• global selector (we need to fix stylis)
• implement React wrapper for makeStyles
• keyframes @xugao: makeStyles: finish up keyframes implementation #16757
• font faces @xugao
• should this be part of makeStyles
• maybe not, but we need to provide an API to process and inject static CSS
• implement Provider @layershifter
• existing ThemeProvider should work
• use makeStyles in react-button @khmakoto
• PR 16172
• is it true react-button is not used anywhere and we can break it?
  • double check with David (he has done some work in Ribbon) - @khmakoto
• do we have the whole inner dev loop for it?
  • story book
  • visual tests in seperate directory -> used in Fabric Screener
• remove Fabric dependencies from react-button
• still needs to be discussed
• suite package vs component package
• we cannot mix v7 and v8 components in the suite package and call it v8
• RFC Increasing focus and iteration speed in convergence - Lean the Towers v2.0 · Issue #15929 · microsoft/fluentui · GitHub
  • v7 suite package
  • converged suite package
    [image:818BE8C6-79CA-4240-BAE7-608CB370A468-654-00008C6F16174CE5/A4D93757-5380-4336-A8A8-ACB677E1B422.png]
  • let's do nothing for now, fix it once we hit the wall
• introduce the react-button to Northstar docs @levithomason
• there are props missing in react-button which are present in N* button (@xugao worked on that previously) - talk to @xugao and @khmakoto
• do build time stuff (@layershifter but not in January)
• do we need it right now?

Motivation

In Nov/Dec iteration, we implemented a PoC of next version of makeStyles in #16082.

Synthetic performance tests show that the new makeStyles is on par with Emotion, 10-20% slower than native CSS and twice as fast as Fela.

Unfortunately, comparison with mergeStyles (v7) and previous iteration of makeStyles (v8) is still unclear - mergeStyles (v7) seem to be equally fast but it has been blamed for its slowness which is one of the reasons to get rid of that. I am not sure if mergeStyles is generally slow or only has perf issues in specific use cases.

makeStyles goals

• build time CSS evaluation
  • RTL,
  • expand
• additive style overrides (without recomputing component styles)
• SSR
• enforces correct way how to do overrides in Application code

Risks

• In case we find out performance is not good enough, it is back to the drawing board.

[JustSlone]

@levithomason @miroslavstastny can we update this list for February and drop something similar on the February project cycle?

[miroslavstastny]

February 2021 update

In January we made a good progress on this

• moved existing v8 components and utilities from react-* packages to react-internal
• added converged react-theme with converged global tokens - Add converged theme package #16703, merged
• added converged react-theme-provider which sets the theme on context and also inject into DOM as CSS variables
• added FluenProvider which handles RTL, and document for converged components
• added react-make-styles

Next steps:

• convert react-* components from previous version of make-styles to react-make-styles and update styles to match design spec
  • preferably do not start with a Button
• iterate on component hooks
  • slot definitions
• address todos in work done in January
  • get rid of proxy converting theme to css variables
• build time transform + remove compat from make-styles