From 9d0cf4208d9cb55776413d0377cb74ddeec8a863 Mon Sep 17 00:00:00 2001 From: harriplappalainen Date: Tue, 15 Nov 2022 09:22:01 +0200 Subject: [PATCH 1/4] Custom hook for using useEffect in SSR to avoid big warning and useLayoutEffect in CSR --- packages/react/src/hooks/useIsomorphicLayoutEffect.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/react/src/hooks/useIsomorphicLayoutEffect.ts diff --git a/packages/react/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts new file mode 100644 index 0000000000..9a0cd6b2eb --- /dev/null +++ b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts @@ -0,0 +1,8 @@ +// use-isomorphic-layout-effect.js +import { useLayoutEffect, useEffect } from 'react'; + +/** + * If rendering on client side, use the useLayoutEffect hook. If SSR, use useEffect to avoid a big warning. + */ +const useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document ? useLayoutEffect : useEffect; +export default useIsomorphicLayoutEffect; From 30234c743695b23495da7fb882684ebda2a7589e Mon Sep 17 00:00:00 2001 From: harriplappalainen Date: Tue, 15 Nov 2022 09:22:29 +0200 Subject: [PATCH 2/4] Utilize the useIsomorphicLayoutEffect hook in useTheme --- packages/react/src/hooks/useTheme.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react/src/hooks/useTheme.tsx b/packages/react/src/hooks/useTheme.tsx index 0253226b28..bc6c313f57 100644 --- a/packages/react/src/hooks/useTheme.tsx +++ b/packages/react/src/hooks/useTheme.tsx @@ -1,6 +1,8 @@ -import { useEffect, useRef } from 'react'; +import { useRef } from 'react'; import uniqueId from 'lodash.uniqueid'; +import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'; + /** * Sets the given custom theme for the component * @param selector The class selector for the component. Used to find the correct style sheet to apply the custom styles to @@ -13,7 +15,6 @@ const setComponentTheme = (selector: string, theme: T, customClass: string): // checks if the given css rule contains the custom class selector const hasCustomRule = (rule: CSSStyleRule): boolean => rule.selectorText?.includes(`${selector}.${customClass}`); - try { // the index of the parent stylesheet let parentIndex = [...document.styleSheets].findIndex((styleSheet) => { @@ -63,7 +64,7 @@ export const useTheme = (selector: string, theme: T): string => { // create a unique selector for the custom theme const customClass = useRef(useCustomTheme ? uniqueId('custom-theme-') : '').current; - useEffect(() => { + useIsomorphicLayoutEffect(() => { if (useCustomTheme) setComponentTheme(selector && selector.split(' ')[0], theme, customClass); }, [selector, theme, customClass, useCustomTheme]); From 242d5986181c4c1ae5d1d983b71afe592a9b79a9 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Thu, 17 Nov 2022 12:05:24 +0200 Subject: [PATCH 3/4] Add note of custom CSS variables class name specificity --- site/src/docs/foundation/guidelines/server-side-rendering.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/docs/foundation/guidelines/server-side-rendering.mdx b/site/src/docs/foundation/guidelines/server-side-rendering.mdx index bcee9f3e7f..c829b67fab 100644 --- a/site/src/docs/foundation/guidelines/server-side-rendering.mdx +++ b/site/src/docs/foundation/guidelines/server-side-rendering.mdx @@ -174,4 +174,6 @@ the tool described in option 1. But if you are unable to use that, extracting th If you customise hds-react components with the theme prop, the style changes will not be visible on the first render. The preferred way to customise hds-react components with server-side rendering is using the className -prop. +prop. However, notice that sometimes CSS selector specificity of 0-1-0 may not be enough to overwrite default CSS variables. +This depends on the CSS declaration order on the page or component's default styles selector specificity. +You may have to use a more specific CSS selector for the custom styles class, for example, `#myComponent.custom-class`, `.custom-class.custom-class`, etc. From 1fc04e39f7c2ee40f16b27e13792a0583abbf100 Mon Sep 17 00:00:00 2001 From: Mika Nevalainen Date: Mon, 21 Nov 2022 15:22:49 +0200 Subject: [PATCH 4/4] Remove obsolete comment --- packages/react/src/hooks/useIsomorphicLayoutEffect.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts index 9a0cd6b2eb..b9195d3230 100644 --- a/packages/react/src/hooks/useIsomorphicLayoutEffect.ts +++ b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts @@ -1,4 +1,3 @@ -// use-isomorphic-layout-effect.js import { useLayoutEffect, useEffect } from 'react'; /**