chore(addCustomCSSWithScoping): move to base package (#6818)

Author: Lukas742

.storybook/components/ProjectTemplate.tsx

@@ -12,10 +12,10 @@ import {
   Text,
   ThemeProvider
 } from '@ui5/webcomponents-react';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
 import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import { useRef, useState } from 'react';
-import { addCustomCSSWithScoping } from '../../packages/main/src/internal/addCustomCSSWithScoping';
 import classes from './ProjectTemplate.module.css';
 
 interface ProjectTemplatePropTypes {

packages/base/package.json

@@ -14,7 +14,8 @@
     "./package.json": "./package.json",
     "./dist": "./dist/index.js",
     "./dist/*": "./dist/*",
-    "./dist/*.js": "./dist/*.js"
+    "./dist/*.js": "./dist/*.js",
+    "./internal/addCustomCSSWithScoping.js": "./dist/utils/addCustomCSSWithScoping.js"
   },
   "homepage": "https://sap.github.io/ui5-webcomponents-react",
   "repository": {

packages/main/src/internal/addCustomCSSWithScoping.ts renamed to packages/base/src/utils/addCustomCSSWithScoping.ts

@@ -1,6 +1,6 @@
 import { attachBoot } from '@ui5/webcomponents-base/dist/Boot.js';
 import { addCustomCSS } from '@ui5/webcomponents-base/dist/Theming.js';
-import { getUi5TagWithSuffix } from './utils.js';
+import { getUi5TagWithSuffix } from './index.js';
 
 export const addCustomCSSWithScoping = (baseTagName: string, customCSS: string) => {
   attachBoot(() => {

packages/base/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { getEffectiveScopingSuffixForTag } from '@ui5/webcomponents-base/CustomElementsScope.js';
+
 export const deprecationNotice = (component: string, message: string) => {
   if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
     const value = `*** ui5-webcomponents-react Deprecation Notice - ${component} ***\n`;
@@ -46,5 +48,10 @@ export const enrichEventWithDetails = <
   return event as EnrichedEventType<Event, Detail>;
 };
 
+export function getUi5TagWithSuffix(baseTagName: string) {
+  const tagNameSuffix: string | undefined = getEffectiveScopingSuffixForTag(baseTagName);
+  return tagNameSuffix ? `${baseTagName}-${tagNameSuffix}` : baseTagName;
+}
+
 export { debounce } from './debounce.js';
 export { throttle } from './throttle.js';

packages/charts/src/internal/ChartContainer.tsx

@@ -1,7 +1,7 @@
 import { BusyIndicator, Label } from '@ui5/webcomponents-react';
 import type { CommonProps } from '@ui5/webcomponents-react';
-import { addCustomCSSWithScoping } from '@ui5/webcomponents-react/dist/internal/addCustomCSSWithScoping.js';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
 import { clsx } from 'clsx';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';

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

@@ -3,11 +3,11 @@
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import { isPhone } from '@ui5/webcomponents-base/dist/Device.js';
 import { useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
 import { clsx } from 'clsx';
 import type { ReactElement } from 'react';
 import { forwardRef, useEffect, useReducer, useRef, useState } from 'react';
 import { AVAILABLE_ACTIONS, CANCEL, X_OF_Y } from '../../i18n/i18n-defaults.js';
-import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
 import { flattenFragments, getUi5TagWithSuffix } from '../../internal/utils.js';
 import { CustomThemingParameters } from '../../themes/CustomVariables.js';
 import type { UI5WCSlotsNode } from '../../types/index.js';

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -6,6 +6,7 @@ import group2Icon from '@ui5/webcomponents-icons/dist/group-2.js';
 import listIcon from '@ui5/webcomponents-icons/dist/list.js';
 import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
 import type { ReactElement, RefObject } from 'react';
 import { Children, cloneElement, useEffect, useId, useReducer, useRef, useState } from 'react';
 import { FlexBoxDirection, FlexBoxJustifyContent, MessageBoxAction, MessageBoxType } from '../../enums/index.js';
@@ -29,7 +30,6 @@ import {
   VISIBLE,
   VISIBLE_AND_ACTIVE
 } from '../../i18n/i18n-defaults.js';
-import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
 import type { OnReorderParams } from '../../internal/FilterBarDialogContext.js';
 import { FilterBarDialogContext } from '../../internal/FilterBarDialogContext.js';
 import { stopPropagation } from '../../internal/stopPropagation.js';

packages/main/src/webComponents/ExpandableText/index.tsx

@@ -3,7 +3,7 @@
 import '@ui5/webcomponents/dist/ExpandableText.js';
 import type ExpandableTextOverflowMode from '@ui5/webcomponents/dist/types/ExpandableTextOverflowMode.js';
 import type TextEmptyIndicatorMode from '@ui5/webcomponents/dist/types/TextEmptyIndicatorMode.js';
-import { addCustomCSSWithScoping } from '../../internal/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '@ui5/webcomponents-react-base/dist/utils/addCustomCSSWithScoping.js';
 import { withWebComponent } from '../../internal/withWebComponent.js';
 import type { CommonProps, Ui5DomRef } from '../../types/index.js';
 

vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig(() => {
     resolve: {
       alias: {
         '@sb': fileURLToPath(new URL('./.storybook', import.meta.url)),
+        '@ui5/webcomponents-react-base/dist': fileURLToPath(new URL('./packages/base/src', import.meta.url)),
         '@ui5/webcomponents-react-base': fileURLToPath(new URL('./packages/base/src/index.ts', import.meta.url)),
         '@ui5/webcomponents-react-charts': fileURLToPath(new URL('./packages/charts/src/index.ts', import.meta.url)),
         '@ui5/webcomponents-react/dist': fileURLToPath(new URL('./packages/main/src/', import.meta.url)),