Skip to content
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

Fluent provider react18 #1

Closed
wants to merge 6 commits into from
Closed

Fluent provider react18 #1

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
918383b
init approach
micahgodbolt Jul 21, 2022
e708894
fix typos
micahgodbolt Jul 21, 2022
8698221
bit of reorg
micahgodbolt Jul 21, 2022
071f6d6
remove concated strings
micahgodbolt Jul 21, 2022
f8fc4e0
collapse test
micahgodbolt Jul 22, 2022
594fbe4
return check
micahgodbolt Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
70 changes: 45 additions & 25 deletions ...components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts
View file
Open in desktop
Expand Up @@ -3,25 +3,47 @@ import * as React from 'react';
import type { FluentProviderState } from './FluentProvider.types';
import { fluentProviderClassNames } from './useFluentProviderStyles';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const useInsertionEffect = (React as any)['useInsertion' + 'Effect'];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should add a comment here that explains why we write this as ['useInsertion' + 'Effect'].

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to be honest, i'm not sure if it is necessary as this repo has different rules than griffel

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case it's worth experimenting with a CRA app to see if we need to do this. In the linked Emotion issue the problem didn't pop up in Emotion but in a consumer of Emotion using React 17.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will cause problems on consumer side, please check microsoft#23625 (comment)


const createStyleTag = (target: Document | undefined, id: string) => {
if (!target) {
return undefined;
}
const tag = target.createElement('style');
tag.setAttribute('id', id);
target.head.appendChild(tag);
return tag;
};

const insertSheet = (tag: HTMLStyleElement, rule: string) => {
const sheet = tag.sheet;

if (sheet) {
if (sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}
sheet.insertRule(rule, 0);
} else if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
}
};

/**
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
*
* @returns CSS class to apply the rule
*/
export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
const { targetDocument, theme } = options;
const styleTag = React.useRef<HTMLStyleElement>();

const styleTagId = useId(fluentProviderClassNames.root);
const styleTag = React.useMemo(() => {
if (!targetDocument) {
return null;
}

const tag = targetDocument.createElement('style');
tag.setAttribute('id', styleTagId);
targetDocument.head.appendChild(tag);
return tag;
}, [styleTagId, targetDocument]);
if (!useInsertionEffect) {
styleTag.current = createStyleTag(targetDocument, styleTagId);
}

const cssRule = React.useMemo(() => {
const cssVarsAsString = theme
Expand All @@ -34,30 +56,28 @@ export const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState
// result: .fluent-provider1 { --css-var: '#fff' }
return `.${styleTagId} { ${cssVarsAsString} }`;
}, [theme, styleTagId]);
const previousCssRule = usePrevious(cssRule);

if (styleTag && previousCssRule !== cssRule) {
const sheet = styleTag.sheet;
const previousCssRule = usePrevious(cssRule);

if (sheet) {
if (sheet.cssRules.length > 0) {
sheet.deleteRule(0);
}
sheet.insertRule(cssRule, 0);
} else if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line no-console
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
}
// insert cssRule into HTML tag if it exists
if (styleTag.current && previousCssRule !== cssRule) {
insertSheet(styleTag.current, cssRule);
}

const useEffect = useInsertionEffect || React.useEffect;

// Removes the style tag from the targetDocument on unmount or change
React.useEffect(() => {
useEffect(() => {
if (useInsertionEffect) {
styleTag.current = createStyleTag(targetDocument, styleTagId);
styleTag.current && insertSheet(styleTag.current, cssRule);
}
return () => {
if (styleTag) {
styleTag.remove();
if (styleTag.current) {
styleTag.current.remove();
}
};
}, [styleTag]);
}, [cssRule, styleTagId, targetDocument]);

return styleTagId;
};