fix: ensure availability of internal CSS vars (#6396)

Author: Lukas742

packages/base/src/hooks/useStylesheet.ts

@@ -6,15 +6,19 @@ import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { StyleStore } from '../stores/StyleStore.js';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 
-export function useStylesheet(styles: StyleDataCSP, componentName: string) {
+interface UseStyleSheetOptions {
+  alwaysInject?: boolean;
+}
+
+export function useStylesheet(styles: StyleDataCSP, componentName: string, options?: UseStyleSheetOptions) {
   const { staticCssInjected, componentsMap } = useSyncExternalStore(
     StyleStore.subscribe,
     StyleStore.getSnapshot,
     StyleStore.getServerSnapshot
   );
 
   useIsomorphicLayoutEffect(() => {
-    const shouldInject = !staticCssInjected;
+    const shouldInject = options?.alwaysInject || !staticCssInjected;
     if (shouldInject) {
       createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
       StyleStore.mountComponent(componentName);

packages/main/package.json

@@ -41,7 +41,8 @@
   "license": "Apache-2.0",
   "sideEffects": [
     "./dist/Assets.js",
-    "./dist/json-imports/*"
+    "./dist/json-imports/*",
+    "./dist/css/index.css"
   ],
   "scripts": {
     "clean": "rimraf dist tmp wrappers ssr",

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

@@ -20,7 +20,7 @@ import { styleData } from './ThemeProvider.css.js';
 function ThemeProviderStyles() {
   const uniqueId = useIsomorphicId();
   useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`);
-  useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`);
+  useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`, { alwaysInject: true });
   return null;
 }