From 5cf79c2b56b921ae36d3a2d01ab40ffb6709beee Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 23 Sep 2024 16:05:30 +0200 Subject: [PATCH 1/2] fix(useStyleSheet): scope component name --- .github/workflows/release-snapshot.yml | 3 +-- packages/base/src/hooks/useStylesheet.ts | 7 +++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.github/workflows/release-snapshot.yml b/.github/workflows/release-snapshot.yml index 570ae28e1cf..3825310c5af 100644 --- a/.github/workflows/release-snapshot.yml +++ b/.github/workflows/release-snapshot.yml @@ -1,7 +1,6 @@ name: 'Release - Snapshot' -on: - workflow_dispatch +on: workflow_dispatch jobs: test: diff --git a/packages/base/src/hooks/useStylesheet.ts b/packages/base/src/hooks/useStylesheet.ts index 54e04c58430..7fa036bb2eb 100644 --- a/packages/base/src/hooks/useStylesheet.ts +++ b/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,11 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio ); useIsomorphicLayoutEffect(() => { + const scopedComponentName = `${componentName}-${getCurrentRuntimeIndex()}`; + console.log(scopedComponentName); const shouldInject = options?.alwaysInject || !staticCssInjected; if (shouldInject) { - createOrUpdateStyle(styles, 'data-ui5wcr-component', componentName); + createOrUpdateStyle(styles, 'data-ui5wcr-component', scopedComponentName); StyleStore.mountComponent(componentName); } @@ -29,7 +32,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); } } }; From 185b915fe193c1523fb221c4f2166ef24adb7484 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 23 Sep 2024 16:07:06 +0200 Subject: [PATCH 2/2] cleanup --- packages/base/src/hooks/useStylesheet.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/base/src/hooks/useStylesheet.ts b/packages/base/src/hooks/useStylesheet.ts index 7fa036bb2eb..74b58a35104 100644 --- a/packages/base/src/hooks/useStylesheet.ts +++ b/packages/base/src/hooks/useStylesheet.ts @@ -20,7 +20,6 @@ export function useStylesheet(styles: StyleDataCSP, componentName: string, optio useIsomorphicLayoutEffect(() => { const scopedComponentName = `${componentName}-${getCurrentRuntimeIndex()}`; - console.log(scopedComponentName); const shouldInject = options?.alwaysInject || !staticCssInjected; if (shouldInject) { createOrUpdateStyle(styles, 'data-ui5wcr-component', scopedComponentName);