feat: add support for nonce in Fela renderer (#25992)

packages/fluentui/CHANGELOG.md

@@ -18,11 +18,17 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- `createFelaRenderer` is now a function @layershifter ([#25992](https://github.com/microsoft/fluentui/pull/25992))
+
 ### Fixes
 - `Carousel` fix for FZ - Adding data-is-visible prop #25973 @kolaps33 ([#25973](https://github.com/microsoft/fluentui/pull/25973))
 - Fix `Dropdown` allowing interaction with selected items when disabled @chpalac ([#25954](https://github.com/microsoft/fluentui/pull/25954))
 - Fix `Button` styles for `disabledFocusable` when `text` @chpalac ([#26012](https://github.com/microsoft/fluentui/pull/26012))
 
+### Features
+- `nonce` can be configured for Fela renderer @layershifter ([#25992](https://github.com/microsoft/fluentui/pull/25992))
+
 <!--------------------------------[ v0.65.0 ]------------------------------- -->
 ## [v0.65.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.65.0) (2022-10-31)
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-northstar_v0.64.0..@fluentui/react-northstar_v0.65.0)

packages/fluentui/docs/src/app.tsx

@@ -38,7 +38,7 @@ const themes = {
 };
 
 function useRendererFactory(): CreateRenderer {
- const rendererFactory = localStorage.fluentRenderer === 'emotion' ? createEmotionRenderer() : createFelaRenderer;
+ const rendererFactory = localStorage.fluentRenderer === 'emotion' ? createEmotionRenderer() : createFelaRenderer();
 
  React.useEffect(() => {
  (window as any).setFluentRenderer = (rendererName: 'fela' | 'emotion') => {

packages/fluentui/react-bindings/src/renderer/RendererContext.ts

@@ -2,4 +2,4 @@ import { createFelaRenderer } from '@fluentui/react-northstar-fela-renderer';
 import { CreateRenderer } from '@fluentui/react-northstar-styles-renderer';
 import * as React from 'react';
 
-export const RendererContext = React.createContext<CreateRenderer>(createFelaRenderer);
+export const RendererContext = React.createContext<CreateRenderer>(createFelaRenderer());

packages/fluentui/react-northstar-fela-renderer/package.json

@@ -9,21 +9,22 @@
  "@fluentui/styles": "^0.65.0",
  "css-in-js-utils": "^3.0.0",
  "fela": "^10.6.1",
+ "fela-dom": "^11.7.0",
  "fela-plugin-embedded": "^10.6.1",
  "fela-plugin-fallback-value": "^10.6.1",
  "fela-plugin-placeholder-prefixer": "^10.6.1",
  "fela-plugin-rtl": "^10.6.1",
  "fela-tools": "^10.6.1",
- "fela-utils": "^10.6.1",
+ "fela-utils": "^11.7.0",
  "inline-style-expand-shorthand": "^1.2.0",
  "lodash": "^4.17.15",
- "react-fela": "^10.6.1",
  "stylis": "^3.5.4"
  },
  "devDependencies": {
  "@fluentui/eslint-plugin": "*",
  "@fluentui/scripts": "^1.0.0",
- "lerna-alias": "^3.0.3-0"
+ "lerna-alias": "^3.0.3-0",
+ "react-fela": "^10.6.1"
  },
  "files": [
  "dist"

packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx

@@ -0,0 +1,64 @@
+import { render, rehydrate } from 'fela-dom';
+import * as React from 'react';
+
+import { FelaRenderer } from './types';
+
+// Copied from https://github.com/robinweser/fela/blob/master/packages/fela-bindings/src/RendererProviderFactory.js
+
+function hasDOM(renderer: FelaRenderer, targetDocument: Document | undefined) {
+ // ensure we're on a browser by using document since window is defined in e.g. React Native
+ // see https://github.com/robinweser/fela/issues/736
+ if (typeof document === 'undefined') {
+ return false;
+ }
+
+ const doc = targetDocument || document;
+
+ return renderer && doc && doc.createElement;
+}
+
+function hasServerRenderedStyle(targetDocument = document) {
+ return targetDocument.querySelectorAll('[data-fela-type]').length > 0;
+}
+
+type RendererProviderProps = {
+ renderer: FelaRenderer;
+ rehydrate?: boolean;
+ targetDocument?: Document;
+};
+
+// Typings provided by "fela" package are outdated, this overrides provides proper definition
+declare module 'fela-dom' {
+ function render(renderer: FelaRenderer, targetDocument?: Document): void;
+ function rehydrate(renderer: FelaRenderer, targetDocument?: Document): void;
+}
+
+export class RendererProvider extends React.Component<RendererProviderProps, Record<string, unknown>> {
+ constructor(props: RendererProviderProps) {
+ super(props);
+ this._renderStyle();
+ }
+
+ componentDidUpdate(prevProps: RendererProviderProps) {
+ if (prevProps.renderer !== this.props.renderer) {
+ // add warning that renderer is changed
+ this._renderStyle();
+ }
+ }
+
+ _renderStyle() {
+ const { renderer, rehydrate: shouldRehydrate, targetDocument } = this.props;
+
+ if (hasDOM(renderer, targetDocument)) {
+ if (shouldRehydrate && hasServerRenderedStyle(targetDocument)) {
+ rehydrate(renderer, targetDocument);
+ } else {
+ render(renderer, targetDocument);
+ }
+ }
+ }
+
+ render() {
+ return <>{this.props.children}</>;
+ }
+}

packages/fluentui/react-northstar-fela-renderer/src/createFelaRenderer.tsx

@@ -5,7 +5,6 @@ import felaPluginFallbackValue from 'fela-plugin-fallback-value';
 import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer';
 import felaPluginRtl from 'fela-plugin-rtl';
 import * as React from 'react';
-import { RendererProvider } from 'react-fela';
 
 import { felaDisableAnimationsPlugin } from './felaDisableAnimationsPlugin';
 import { felaExpandCssShorthandsPlugin } from './felaExpandCssShorthandsPlugin';
@@ -14,7 +13,8 @@ import { felaInvokeKeyframesPlugin } from './felaInvokeKeyframesPlugin';
 import { felaPerformanceEnhancer } from './felaPerformanceEnhancer';
 import { felaSanitizeCssPlugin } from './felaSanitizeCssPlugin';
 import { felaStylisEnhancer } from './felaStylisEnhancer';
-import { FelaRendererParam } from './types';
+import { RendererProvider } from './RendererProvider';
+import { FelaRenderer, FelaRendererParam } from './types';
 
 let felaDevMode = false;
 
@@ -92,58 +92,72 @@ const rendererConfig = {
  ],
 };
 
-export const createFelaRenderer: CreateRenderer = () => {
- const felaRenderer = createRenderer(rendererConfig) as IRenderer & {
- listeners: [];
- nodes: Record<string, HTMLStyleElement>;
- updateSubscription: Function | undefined;
- };
- let usedRenderers: number = 0;
-
- // rehydration disabled to avoid leaking styles between renderers
- // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
- const Provider: Renderer['Provider'] = props => (
- <RendererProvider renderer={felaRenderer} {...{ rehydrate: false, targetDocument: props.target }}>
- {props.children}
- </RendererProvider>
- );
-
- return {
- registerUsage: () => {
- usedRenderers += 1;
- },
- unregisterUsage: () => {
- usedRenderers -= 1;
-
- if (usedRenderers === 0) {
- felaRenderer.listeners = [];
- felaRenderer.nodes = {};
- felaRenderer.updateSubscription = undefined;
- }
- },
-
- renderFont: font => {
- felaRenderer.renderFont(font.name, font.paths, font.props);
- },
- renderGlobal: felaRenderer.renderStatic,
- renderRule: (styles, param) => {
- const felaParam: FelaRendererParam = {
- ...param,
- theme: { direction: param.direction },
- };
+export type CreateFelaRendererOptions = {
+ nonce?: string;
+};
 
- return felaRenderer.renderRule(() => (styles as unknown) as IStyle, felaParam);
-  },
+export function createFelaRenderer(options: CreateFelaRendererOptions = {}): CreateRenderer {
+ const { nonce } = options;
 
- // getOriginalRenderer() is implemented only for tests to be compatible with jest-react-fela expectations.
- getOriginalRenderer: (): IRenderer => {
- if (process.env.NODE_ENV !== 'test') {
- throw new Error('This method implements private API and can be used only in tests');
- }
+ return () => {
+ const felaRenderer = createRenderer(rendererConfig) as FelaRenderer & {
+ listeners: [];
+ nodes: Record<string, HTMLStyleElement>;
+ updateSubscription: Function | undefined;
+ };
+ let usedRenderers: number = 0;
 
- return felaRenderer;
- },
+ if (nonce) {
+ felaRenderer.styleNodeAttributes = {
+ nonce,
+ };
+ }
+
+ // rehydration disabled to avoid leaking styles between renderers
+ // https://github.com/rofrischmann/fela/blob/master/docs/api/fela-dom/rehydrate.md
+ const Provider: Renderer['Provider'] = props => (
+ <RendererProvider renderer={felaRenderer} rehydrate={false} targetDocument={props.target}>
+ {props.children}
+ </RendererProvider>
+ );
 
- Provider,
+ return {
+ registerUsage: () => {
+ usedRenderers += 1;
+ },
+ unregisterUsage: () => {
+ usedRenderers -= 1;
+
+ if (usedRenderers === 0) {
+ felaRenderer.listeners = [];
+ felaRenderer.nodes = {};
+ felaRenderer.updateSubscription = undefined;
+ }
+ },
+
+ renderFont: font => {
+ felaRenderer.renderFont(font.name, font.paths, font.props);
+ },
+ renderGlobal: felaRenderer.renderStatic,
+ renderRule: (styles, param) => {
+ const felaParam: FelaRendererParam = {
+ ...param,
+ theme: { direction: param.direction },
+ };
+
+ return felaRenderer.renderRule(() => (styles as unknown) as IStyle, felaParam);
+ },
+
+ // getOriginalRenderer() is implemented only for tests to be compatible with jest-react-fela expectations.
+ getOriginalRenderer: (): IRenderer => {
+ if (process.env.NODE_ENV !== 'test') {
+ throw new Error('This method implements private API and can be used only in tests');
+ }
+
+ return felaRenderer;
+ },
+
+ Provider,
+ };
  };
-};
+}

packages/fluentui/react-northstar-fela-renderer/src/types.ts

@@ -16,6 +16,8 @@ export type FelaRenderer = IRenderer & {
  media?: string,
  support?: string,
  ): string;
+
+ styleNodeAttributes: Record<string, string | number | boolean>;
 };
 
 export type FelaRendererChange = {

packages/fluentui/react-northstar-fela-renderer/test/felaRenderer-test.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { FelaComponent, RendererProvider, ThemeProvider } from 'react-fela';
 
-const felaRenderer = (createFelaRenderer() as any).getOriginalRenderer();
+const felaRenderer = (createFelaRenderer()() as any).getOriginalRenderer();
 
 function createSnapshot(component: JSX.Element, theme = {}) {
  const div = document.createElement('div');