perf(fela): use Stylis for prefixing

packages/fluentui/CHANGELOG.md

@@ -20,10 +20,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - `Attachment.slotClassNames` were removed @layershifter ([#12674](https://github.com/microsoft/fluentui/pull/12674))
 - Styles from `Attachment` slots were moved to exact components (`AttachmentAction`, `AttachmentHeader`, etc.) @layershifter ([#12674](https://github.com/microsoft/fluentui/pull/12674))
+- CSS Grid, `linear-gradient()`, `background-clip`, `cross-fade()` are not prefixed @layershifter ([#12289](https://github.com/microsoft/fluentui/pull/12289))
 
 ### Features
 - Add `body` slot to `Attachment` component @layershifter ([#12674](https://github.com/microsoft/fluentui/pull/12674))
 
+### Performance
+- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/microsoft/fluentui/pull/12289))
+
 <!--------------------------------[ v0.48.0 ]------------------------------- -->
 ## [v0.48.0](https://github.com/OfficeDev/office-ui-fabric-react/tree/fluentui_v0.48.0) (2020-04-15)
 [Compare changes](https://github.com/OfficeDev/office-ui-fabric-react/compare/fluentuizero_v0.47.1..@fluentui/react-northstar_v0.48.0)

packages/fluentui/react-northstar/package.json

@@ -21,15 +21,15 @@
     "fela-plugin-embedded": "^10.6.1",
     "fela-plugin-fallback-value": "^10.6.1",
     "fela-plugin-placeholder-prefixer": "^10.6.1",
-    "fela-plugin-prefixer": "^10.6.1",
     "fela-plugin-rtl": "^10.6.1",
     "inline-style-expand-shorthand": "^1.2.0",
     "keyboard-key": "1.0.1",
     "lodash": "^4.17.15",
     "popper.js": "^1.15.0",
     "prop-types": "^15.7.2",
     "react-fela": "^10.6.1",
-    "react-transition-group": "^4.3.0"
+    "react-transition-group": "^4.3.0",
+    "stylis": "^3.5.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.1.1",

packages/fluentui/react-northstar/src/themes/teams/components/Accordion/accordionTitleStyles.ts

@@ -12,8 +12,14 @@ const accordionTitleStyles: ComponentSlotStylesPrepared<AccordionTitleProps, Acc
     cursor: p.disabled ? 'default' : 'pointer',
   }),
   contentWrapper: ({ props: p }) => ({
-    display: 'grid',
-    gridTemplateColumns: `auto ${p.content ? '1fr' : ''}`,
+    display: ['grid', '-ms-grid'],
+    gridTemplateColumns: 'auto',
+    msGridColumns: 'auto',
+
+    ...(p.content && {
+      gridTemplateColumns: 'auto 1fr',
+      msGridColumns: 'auto 1fr',
+    }),
   }),
   indicator: ({ props: p, variables: v, rtl }) => ({
     alignItems: 'center',

packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts

@@ -18,9 +18,16 @@ const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxV
   root: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => ({
     position: 'relative',
 
-    display: 'inline-grid',
+    display: ['inline-grid', '-ms-inline-grid'],
+    gridTemplateColumns: `1fr ${v.gap} auto`,
     // IE11: Gap is done via virtual column as in autoprefixer
-    gridTemplateColumns: p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`,
+    msGridColumns: `auto ${v.gap} 1fr`,
+
+    ...(p.labelPosition === 'start' && {
+      gridTemplateColumns: `1fr ${v.gap} auto`,
+      msGridColumns: `1fr ${v.gap} auto`,
+    }),
+
     cursor: 'pointer',
     outline: 0,
 
@@ -82,8 +89,15 @@ const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxV
   }),
 
   checkbox: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    gridColumn: p.labelPosition === 'start' ? 3 : 1,
-    '-ms-grid-row-align': 'center',
+    msGridRowAlign: 'center',
+    gridColumn: 1,
+    msGridColumn: 1,
+
+    ...(p.labelPosition === 'start' && {
+      gridColumn: 3,
+      msGridColumn: 3,
+    }),
+
     boxShadow: 'unset',
     width: pxToRem(16),
     height: pxToRem(16),
@@ -120,8 +134,15 @@ const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxV
   }),
 
   toggle: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    '-ms-grid-row-align': 'center',
-    gridColumn: p.labelPosition === 'start' ? 3 : 1,
+    msGridRowAlign: 'center',
+    gridColumn: 1,
+    msGridColumn: 1,
+
+    ...(p.labelPosition === 'start' && {
+      gridColumn: 3,
+      msGridColumn: 3,
+    }),
+
     boxShadow: 'unset',
     boxSizing: 'border-box',
 
@@ -170,7 +191,14 @@ const checkboxStyles: ComponentSlotStylesPrepared<CheckboxStylesProps, CheckboxV
 
   label: ({ props: p }): ICSSInJSStyle => ({
     display: 'block', // IE11: should be forced to be block, as inline-block is not supported
-    gridColumn: p.labelPosition === 'start' ? 1 : 3,
+
+    gridColumn: 3,
+    msGridColumn: 3,
+
+    ...(p.labelPosition === 'start' && {
+      gridColumn: 1,
+      msGridColumn: 1,
+    }),
   }),
 };
 

packages/fluentui/react-northstar/src/themes/teams/components/Dialog/dialogStyles.ts

@@ -13,15 +13,19 @@ export default {
     padding: v.rootPadding,
     position: 'relative',
     width: v.rootWidth,
-    display: 'grid',
+
+    display: ['grid', '-ms-grid'],
     gridTemplateColumns: '1fr auto',
+    msGridColumns: '1fr auto',
+
     boxShadow: v.boxShadow,
     color: v.foregroundColor,
   }),
 
   footer: (): ICSSInJSStyle => ({
     gridColumn: '1 / -1',
     gridRow: 3,
+    msGridRow: 3,
   }),
 
   actions: (): ICSSInJSStyle => ({
@@ -30,24 +34,34 @@ export default {
 
   content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({
     margin: v.contentMargin,
+
     gridColumn: '1 / span 2',
     gridRow: 2,
+
+    msGridColumn: 1,
+    msGridColumnSpan: 2,
+    msGridRow: 2,
+
     justifySelf: 'left',
     width: '100%',
   }),
 
   header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({
     margin: v.headerMargin,
     gridRow: 1,
+    msGridRow: 1,
     gridColumn: 1,
+    msGridColumn: 1,
     justifySelf: 'left',
     fontSize: v.headerFontSize,
     fontWeight: v.headerFontWeight,
   }),
 
   headerAction: ({ variables: v }: DialogStyleParams) => ({
     gridRow: 1,
+    msGridRow: 1,
     gridColumn: 2,
+    msGridColumn: 2,
     color: v.foregroundColor,
     margin: v.headerActionMargin,
   }),

packages/fluentui/react-northstar/src/themes/teams/components/Form/formStyles.ts

@@ -6,8 +6,9 @@ const formStyles: ComponentSlotStylesPrepared<FormProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => ({
     height: '100%',
     width: '100%',
-    display: 'grid',
+    display: ['grid', '-ms-grid'],
     gridTemplateColumns: '1fr',
+    msGridColumns: '1fr',
     justifyContent: 'space-evenly',
     gridGap: pxToRem(20),
     justifyItems: 'start',

packages/fluentui/react-northstar/src/themes/teams/components/Grid/gridStyles.ts

@@ -17,12 +17,18 @@ const gridStyles: ComponentSlotStylesPrepared<GridProps, GridVariables> = {
       width,
       padding,
       gridGap,
-      display: 'grid',
+      display: ['grid', '-ms-grid'],
       justifyContent: 'space-evenly',
 
       ...(rows && !columns && { gridAutoFlow: 'column' }),
-      ...(rows && { gridTemplateRows: getCSSTemplateValue(rows) }),
-      ...(columns && { gridTemplateColumns: getCSSTemplateValue(columns) }),
+      ...(rows && {
+        gridTemplateRows: getCSSTemplateValue(rows),
+        msGridRows: getCSSTemplateValue(rows),
+      }),
+      ...(columns && {
+        gridTemplateColumns: getCSSTemplateValue(columns),
+        msGridColumns: getCSSTemplateValue(columns),
+      }),
 
       '& > *': { outlineOffset: '-3px' },
     };

packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts

@@ -25,7 +25,7 @@ const layoutStyles: ComponentSlotStylesPrepared<LayoutProps> = {
       ...(debug && debugRoot()),
       justifyItems,
       alignItems,
-      display: 'grid',
+      display: ['grid', '-ms-grid'],
       [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: [
         // Heads up!
         // IE11 Doesn't support grid-gap, insert virtual columns instead
@@ -60,7 +60,7 @@ const layoutStyles: ComponentSlotStylesPrepared<LayoutProps> = {
   main: ({ props: p }): ICSSInJSStyle => ({
     ...(p.debug && debugArea()),
     alignItems: 'center',
-    display: 'grid',
+    display: ['grid', '-ms-grid'],
     [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: countTrue([p.start, p.start && p.gap, p.main]),
     ...p.mainCSS,
   }),

packages/fluentui/react-northstar/src/utils/felaRenderer.tsx

@@ -3,14 +3,14 @@ import { createRenderer as createFelaRenderer } from 'fela';
 import felaPluginEmbedded from 'fela-plugin-embedded';
 import felaPluginFallbackValue from 'fela-plugin-fallback-value';
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer';
-import felaPluginPrefixer from 'fela-plugin-prefixer';
 import felaPluginRtl from 'fela-plugin-rtl';
 
 import felaDisableAnimationsPlugin from './felaDisableAnimationsPlugin';
 import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin';
 import felaFocusVisibleEnhancer from './felaFocusVisibleEnhancer';
 import felaInvokeKeyframesPlugin from './felaInvokeKeyframesPlugin';
 import felaSanitizeCss from './felaSanitizeCssPlugin';
+import felaStylisEnhancer from './felaStylisEnhancer';
 
 let felaDevMode = false;
 
@@ -52,7 +52,7 @@ const filterClassName = (className: string): boolean =>
 const rendererConfig = {
   devMode: felaDevMode,
   filterClassName,
-  enhancers: [felaFocusVisibleEnhancer],
+  enhancers: [felaFocusVisibleEnhancer, felaStylisEnhancer],
   plugins: [
     felaDisableAnimationsPlugin(),
 
@@ -65,7 +65,6 @@ const rendererConfig = {
     felaPluginPlaceholderPrefixer(),
     felaInvokeKeyframesPlugin(),
     felaPluginEmbedded(),
-    felaPluginPrefixer(),
 
     felaExpandCssShorthandsPlugin(),
 

packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts

@@ -0,0 +1,31 @@
+import { RULE_TYPE } from 'fela-utils';
+// @ts-ignore
+import Stylis from 'stylis';
+
+import { Renderer, RendererChange } from './types';
+
+// We use Stylis only for vendor prefixing, all other capabilities are disabled
+const stylis = new Stylis({
+  cascade: false,
+  compress: false,
+  global: false,
+  keyframe: false,
+  preserve: false,
+  semicolon: false,
+});
+
+const felaStylisEnhancer = (renderer: Renderer) => ({
+  ...renderer,
+  _emitChange: (change: RendererChange) => {
+    if (change.type === RULE_TYPE) {
+      const prefixed: string = stylis('', change.declaration);
+
+      // Fela uses objects by references, it's safe to override properties
+      change.declaration = prefixed.slice(1, -1);
+    }
+
+    renderer._emitChange(change);
+  },
+});
+
+export default felaStylisEnhancer;

packages/fluentui/react-northstar/src/utils/types.ts

@@ -0,0 +1,16 @@
+import { IRenderer } from 'fela';
+
+export type Renderer = IRenderer & {
+  cache: Record<string, RendererChange>;
+  _emitChange?: (change: RendererChange) => void;
+};
+
+export type RendererChange = {
+  type: 'RULE' | 'KEYFRAME' | 'FONT' | 'STATIC' | 'CLEAR';
+  className: string;
+  selector: string;
+  declaration: string;
+  pseudo: string;
+  media: string;
+  support: string;
+};