fix(useStyleSheet): scope component name to ui5wc runtime (#6395)

Author: Lukas742

.github/workflows/release-snapshot.yml

@@ -1,7 +1,6 @@
 name: 'Release - Snapshot'
 
-on:
-  workflow_dispatch
+on: workflow_dispatch
 
 jobs:
   test:
@@ -25,7 +24,7 @@ jobs:
           fetch-depth: 0
 
       - name: Setup Node.js environment
-        uses: actions/[email protected].4
+        uses: actions/[email protected].3
         with:
           node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'
@@ -34,34 +33,23 @@ jobs:
         run: |
           npm install -g npm
           yarn install
+          yarn build
 
-      - name: version
+      - name: publish
         run: |
           git config user.email ${{ secrets.BOT_GIT_EMAIL }}
           git config user.name ${{ secrets.BOT_GIT_USERNAME }}
 
           git_hash=$(git rev-parse --short "$GITHUB_SHA")
           current_branch=$(node -p -e "'${{ github.ref }}'.replace('refs/heads/', '')")
-          echo "current_branch=${current_branch}" >> "$GITHUB_ENV"
 
-          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna version "0.0.0-${git_hash}" \
+          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish "0.0.0-${git_hash}" \
             --exact \
             --no-push \
             --no-git-tag-version \
+            --pre-dist-tag dev \
             --allow-branch ${current_branch}
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-          NPM_CONFIG_PROVENANCE: true
 
-      - name: build
-        run: yarn build
-
-      - name: publish to npm
-        run: |
-          ${GITHUB_WORKSPACE}/node_modules/.bin/lerna publish from-git \
-            --pre-dist-tag dev \
-            --allow-branch ${{ env.current_branch }}
         env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
           NPM_CONFIG_PROVENANCE: true

packages/base/src/hooks/useStylesheet.ts

@@ -2,6 +2,7 @@
 
 import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
 import { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
+import { getCurrentRuntimeIndex } from '@ui5/webcomponents-base/dist/Runtimes.js';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { StyleStore } from '../stores/StyleStore.js';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
@@ -18,9 +19,10 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio
   );
 
   useIsomorphicLayoutEffect(() => {
+    const scopedComponentName = `${componentName}-${getCurrentRuntimeIndex()}`;
     const shouldInject = options?.alwaysInject || !staticCssInjected;
     if (shouldInject) {
-      createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName);
+      createOrUpdateStyle(styles, 'data-ui5wcr-component', scopedComponentName);
       StyleStore.mountComponent(componentName);
     }
 
@@ -29,7 +31,7 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio
         StyleStore.unmountComponent(componentName);
         const numberOfMountedComponents = componentsMap.get(componentName)!;
         if (numberOfMountedComponents <= 0) {
-          removeStyle('data-ui5wcr-component', componentName);
+          removeStyle('data-ui5wcr-component', scopedComponentName);
         }
       }
     };