refactor(ThemeProvider): Remove custom Theme Injection (#241)

Remove custom theme injection on Theme Provider as all required CSS variables are now injected by the UI5 Web Components.
BREAKING CHANGE: Removed prop `noInjectThemeProperties` as this is now handled by the UI5 Web Components

Author: MarcusNotheis

packages/main/src/components/ThemeProvider/index.tsx

@@ -1,15 +1,11 @@
-import boot from '@ui5/webcomponents-base/dist/boot';
 import { getCompactSize } from '@ui5/webcomponents-base/dist/config/CompactSize';
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
 import { createGenerateClassName } from '@ui5/webcomponents-react-base/lib/createGenerateClassName';
-import { Device } from '@ui5/webcomponents-react-base/lib/Device';
 import * as sap_fiori_3 from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
 import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
 import { MessageToast } from '@ui5/webcomponents-react/lib/MessageToast';
-import { Themes } from '@ui5/webcomponents-react/lib/Themes';
-import { _ as fiori3Theme } from '@ui5/webcomponents/dist/assets/themes/sap_fiori_3/parameters-bundle.css.json';
 import { Jss } from 'jss';
-import React, { FC, Fragment, ReactNode, useEffect, useMemo } from 'react';
+import React, { FC, Fragment, ReactNode, useMemo } from 'react';
 import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss';
 
 export interface ThemeProviderProps {
@@ -20,71 +16,26 @@ export interface ThemeProviderProps {
   withToastContainer?: boolean;
   children: ReactNode;
   /*
-   * Allows you to inject a custom JSS instance, e.g. if you need another insertionPoint or differnent plugins.
+   * Allows you to inject a custom JSS instance, e.g. if you need another insertionPoint or different plugins.
    * If not provided, the default instance from `react-jss` will be used.
    */
   jss?: Jss;
-  /*
-   * The Theme Provider injects the fiori_3 theme variables into the document head.
-   * If this prop is set to true, this step is skipped.
-   */
-  noInjectThemeProperties?: boolean;
 }
 
 const generateClassName = createGenerateClassName();
 
 const ThemeProvider: FC<ThemeProviderProps> = (props) => {
-  const { withToastContainer, children, jss, noInjectThemeProperties } = props;
+  const { withToastContainer, children, jss } = props;
   const theme = getTheme();
-
-  useEffect(() => {
-    if (!noInjectThemeProperties) {
-      boot().then(() => {
-        // only inject parameters for sap_fiori_3 and if they haven't been injected before
-        let styleElement = document.head.querySelector('style[data-ui5-webcomponents-react-theme-properties]');
-        if (theme === Themes.sap_fiori_3) {
-          if (!styleElement) {
-            styleElement = document.createElement('style');
-            // @ts-ignore
-            styleElement.type = 'text/css';
-            styleElement.setAttribute('data-ui5-webcomponents-react-theme-properties', '');
-            document.head.appendChild(styleElement);
-          }
-
-          if (!styleElement.textContent) {
-            styleElement.textContent = fiori3Theme;
-          }
-
-          const CSSVarsPonyfill = window['CSSVarsPonyfill'];
-          if (Device.browser.msie && CSSVarsPonyfill) {
-            setTimeout(() => {
-              CSSVarsPonyfill.resetCssVars();
-              CSSVarsPonyfill.cssVars();
-            }, 0);
-          }
-        } else {
-          if (styleElement) {
-            styleElement.textContent = '';
-          }
-        }
-      });
-    }
-  }, [theme, noInjectThemeProperties]);
-
   const isCompactSize = getCompactSize();
 
-  const parameters = useMemo(() => {
-    if (theme === Themes.sap_fiori_3) return sap_fiori_3;
-    return null;
-  }, [theme]);
-
   const themeContext = useMemo(() => {
     return {
       theme,
       contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
-      parameters
+      parameters: sap_fiori_3
     };
-  }, [theme, isCompactSize, parameters]);
+  }, [theme, isCompactSize]);
 
   return (
     <JssProvider generateId={generateClassName} jss={jss}>
@@ -100,8 +51,7 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {
 
 ThemeProvider.displayName = 'ThemeProvider';
 ThemeProvider.defaultProps = {
-  withToastContainer: false,
-  noInjectThemeProperties: false
+  withToastContainer: false
 };
 
 export { ThemeProvider };