fix(docs): icon fonts switching, unloading theme variables bug (#3853)

* feat(docs): storybook font changing (fiori/horizon) * fix(docs): unloading theme variables fix * fix(docs): icon fonts switching in prod
SAP · Sep 7, 2022 · c760c77 · c760c77
1 parent 1f38481
commit c760c77
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 101 deletions.
diff --git a/.storybook/custom/custom.scss b/.storybook/custom/custom.scss
@@ -1,3 +1,4 @@
+@import "../../src/fonts/sap_fonts";
 
 body {
   font-family: '72', 'Open Sans', sans-serif;

diff --git a/.storybook/custom/loaders/load-styles.js b/.storybook/custom/loaders/load-styles.js
diff --git a/.storybook/custom/styleChangers/dev/themeVariablesManager.js b/.storybook/custom/styleChangers/dev/themeVariablesManager.js
@@ -1,45 +1,42 @@
 import availableThemes from '../../constants/availableThemes';
 import generateStyleLinkTagFn from '../utils/generateStyleLinkTagFn';
 import getLazyLoader from '../utils/getLazyLoader';
+import inlineStyleLazyLoader from '../utils/inlineStyleLazyLoader';
 
 export default (manager) => {
     let currentTheme;
 
     const styleLinkTag = generateStyleLinkTagFn(manager);
     const lazyLoader = getLazyLoader(styleLinkTag);
-    const themeVariablesLazyLoader = (themeName) => {
-        const {
-            default: { use, unuse }
-        } = require(`../../../../src/styles/theming/${themeName}.scss`);
-        return {
-            use: () => {
-                use({
-                    attributes: {
-                        ['data-managedBy']: manager
-                    }
-                });
-            },
-            unuse
-        };
-    };
 
     const baseVariables = availableThemes.reduce((acc, { value }) => {
         acc[value] = lazyLoader(`theming-base-content/content/Base/baseLib/${value}/css_variables.css`);
         return acc;
     }, {});
     const styleVariables = availableThemes.reduce((acc, { value }) => {
-        acc[value] = themeVariablesLazyLoader(value);
+        const content = require(`../../../../src/styles/theming/${value}.scss`).default.toString();
+        acc[value] = inlineStyleLazyLoader(content);
+        return acc;
+    }, {});
+    const fontVariables = availableThemes.reduce((acc, { value }) => {
+        const baseTheme = value.startsWith('sap_fiori_3') ? 'sap_fiori_3' : 'sap_horizon';
+        const content = require(`../../../../src/fonts/${baseTheme}_fonts.scss`).default.toString()
+        acc[value] = inlineStyleLazyLoader(content);
         return acc;
     }, {});
 
     return {
         use: (themeName) => {
-            baseVariables[themeName].use();
-            styleVariables[themeName].use();
             if (currentTheme && currentTheme !== themeName) {
                 baseVariables[currentTheme].unuse();
                 styleVariables[currentTheme].unuse();
+                fontVariables[currentTheme].unuse();
             }
+
+            baseVariables[themeName].use();
+            styleVariables[themeName].use();
+            fontVariables[themeName].use();
+
             currentTheme = themeName;
         }
     };

diff --git a/.storybook/custom/styleChangers/prod/themeVariablesManager.js b/.storybook/custom/styleChangers/prod/themeVariablesManager.js
@@ -1,6 +1,13 @@
 import availableThemes from '../../constants/availableThemes';
 import generateStyleLinkTagFn from '../utils/generateStyleLinkTagFn';
 import getLazyLoader from '../utils/getLazyLoader';
+import inlineStyleLazyLoader from '../utils/inlineStyleLazyLoader';
+
+function getFontsContent(theme) {
+    const baseTheme = theme.startsWith('sap_fiori_3') ? 'sap_fiori_3' : 'sap_horizon';
+    const content = require(`../../../../src/fonts/${baseTheme}_fonts.scss`).default.toString();
+    return content.replace(/^~@sap-theming/, '..')
+}
 
 export default (managedBy) => {
     let currentTheme;
@@ -16,15 +23,24 @@ export default (managedBy) => {
         acc[value] = lazyLoader(`theming/${value}.css`);
         return acc;
     }, {});
+    const fontVariables = availableThemes.reduce((acc, { value }) => {
+        const content = getFontsContent(value);
+        acc[value] = inlineStyleLazyLoader(content);
+        return acc;
+    }, {});
 
     return {
         use: (themeName) => {
-            baseVariables[themeName].use();
-            styleVariables[themeName].use();
             if (currentTheme && currentTheme !== themeName) {
                 baseVariables[currentTheme].unuse();
                 styleVariables[currentTheme].unuse();
+                fontVariables[currentTheme].unuse();
             }
+
+            baseVariables[themeName].use();
+            styleVariables[themeName].use();
+            fontVariables[themeName].use();
+
             currentTheme = themeName;
         }
     };

diff --git a/.storybook/custom/styleChangers/utils/inlineStyleLazyLoader.js b/.storybook/custom/styleChangers/utils/inlineStyleLazyLoader.js
@@ -0,0 +1,36 @@
+const uniqueIdentifier = "id";
+let uniqueId = 0;
+
+function createStyleTag(content) {
+    let style = document.createElement('style');
+    style.textContent = content;
+    style.setAttribute("id", `style-${uniqueId++}`);
+    return style;
+}
+
+function generateUseStyleTagFn(styleTag) {
+    return () => {
+        const uniqueValue = styleTag.getAttribute(uniqueIdentifier);
+        const tagName = styleTag.tagName;
+
+        // If such element with such unique attribute value already loaded on the page, no need to duplicate it once again.
+        if (document.querySelector(`${tagName}[${uniqueIdentifier}="${uniqueValue}"]`) !== null) {
+            return;
+        }
+
+        document.head.appendChild(styleTag);
+    }
+}
+
+function generateUnuseStyleTagFn(styleTag) {
+    return () => {
+        if (document.head.contains(styleTag)) {
+            document.head.removeChild(styleTag);
+        }
+    };
+}
+
+export default (content) => {
+    const styleTag = createStyleTag(content);
+    return { use: generateUseStyleTagFn(styleTag), unuse: generateUnuseStyleTagFn(styleTag) };
+}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,5 @@
 const { merge } = require('webpack-merge');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
-const stylesLoader = require('./custom/loaders/load-styles');
 const isProduction = require('./custom/constants/isProduction');
 const maxAssetSize = 1024 * 1024;
 
@@ -73,7 +72,29 @@ module.exports = {
             ]
         });
 
-        config.module.rules.push(stylesLoader);
+        config.module.rules.push({
+            // NOT theming or fonts
+            test: /^(?!.*\/(theming|fonts)\/).*\.s[ac]ss$/i,
+            use: [
+                {
+                    loader: 'style-loader',
+                    options: {
+                        injectType: 'lazyStyleTag'
+                    }
+                },
+                "css-loader",
+                "sass-loader",
+            ]
+        });
+
+        config.module.rules.push({
+            // Theming or fonts
+            test: /^(?=.*\/(theming|fonts)\/).*\.s[ac]ss$/i,
+            use: [
+                "css-loader",
+                "sass-loader",
+            ]
+        });
 
         return merge(config, {
             optimization: {

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,48 +1,5 @@
 <link rel="shortcut icon" href="/favicon.ico" />
 <link rel="icon" type="image/svg" href="/logo.svg" sizes="192x192" />
+
 <script type="text/javascript" src="preview-head.js"></script>
 <script src="https://unpkg.com/focus-visible@5.1.0/dist/focus-visible.js"></script>
-
-<style type="text/css">
-    @font-face {
-        font-family: '72';
-        src: url('./theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Regular.woff') format('woff');
-        font-weight: normal;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: '72';
-        src: url('./theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Light.woff') format('woff');
-        font-weight: 300;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: '72';
-        src: url('./theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Bold.woff') format('woff');
-        font-weight: 700;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'SAP-icons';
-        src: url('./theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff') format('woff');
-        font-weight: normal;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'BusinessSuiteInAppSymbols';
-        src: url('./theming-base-content/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff') format('woff');
-        font-weight: normal;
-        font-style: normal;
-    }
-
-    @font-face {
-        font-family: 'SAP-icons-TNT';
-        src: url('./theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff') format('woff');
-        font-weight: normal;
-        font-style: normal;
-    }
-</style>