Define and use CSSPropertiesWithVariables type

Author: RoyEJohnson

src/components/BodyPortal.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { CSSPropertiesWithVariables } from '../types';
 import { render } from '@testing-library/react';
 import { BodyPortal } from './BodyPortal';
 import { BodyPortalSlotsContext } from './BodyPortalSlotsContext';
@@ -266,7 +267,7 @@ describe('BodyPortal', () => {
     render(
       <BodyPortal
         slot='modal'
-        style={{ '--my-variable': 'red', '--another-var': '10px' } as React.CSSProperties}
+        style={{ '--my-variable': 'red', '--another-var': '10px' } as CSSPropertiesWithVariables}
       >
         Modal content
       </BodyPortal>,
@@ -300,7 +301,7 @@ describe('BodyPortal', () => {
     const TestComponent = ({ color }: { color: string }) => (
       <BodyPortal
         slot='modal'
-        style={{ '--color': color } as React.CSSProperties}
+        style={{ '--color': color } as CSSPropertiesWithVariables}
       >
         Modal content
       </BodyPortal>
@@ -326,7 +327,7 @@ describe('BodyPortal', () => {
     const { unmount } = render(
       <BodyPortal
         slot='modal'
-        style={{ '--my-variable': 'red', backgroundColor: 'blue' } as React.CSSProperties}
+        style={{ '--my-variable': 'red', backgroundColor: 'blue' } as CSSPropertiesWithVariables}
       >
         Modal content
       </BodyPortal>,
@@ -344,11 +345,11 @@ describe('BodyPortal', () => {
     expect(document.body.querySelector('[data-portal-slot="modal"]')).toBeNull();
   });
 
-  it('handles null and undefined style values gracefully', () => {
+  it('handles undefined style values gracefully', () => {
     render(
       <BodyPortal
         slot='modal'
-        style={{ '--defined': 'red', '--null': null, '--undefined': undefined } as React.CSSProperties}
+        style={{ '--defined': 'red', '--undefined': undefined } as CSSPropertiesWithVariables}
       >
         Modal content
       </BodyPortal>,
@@ -359,7 +360,6 @@ describe('BodyPortal', () => {
     expect(portal).toBeTruthy();
     expect(portal.style.getPropertyValue('--defined')).toBe('red');
     // null and undefined values should not be set
-    expect(portal.style.getPropertyValue('--null')).toBe('');
     expect(portal.style.getPropertyValue('--undefined')).toBe('');
   });
 });

src/components/BodyPortal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 import { BodyPortalSlotsContext } from './BodyPortalSlotsContext';
+import { CSSPropertiesWithVariables } from '../types';
 
 const getInsertBeforeTarget = (bodyPortalSlots: string[], slot?: string) => {
   // Note: If the slot is not found in bodyPortalSlots, this code will append the tag instead,
@@ -29,7 +30,7 @@ export type BodyPortalProps = React.PropsWithChildren<{
   id?: string;
   'data-testid'?: string;
   ariaLabel?: string;
-  style?: React.CSSProperties;
+  style?: CSSPropertiesWithVariables;
 }>;
 
 export const BodyPortal = React.forwardRef<HTMLElement, BodyPortalProps>((

src/components/NavBar.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { CSSPropertiesWithVariables } from "../types";
 import { colors } from "../theme";
 import { NavBar } from "./NavBar";
 import { NavBarButton } from "./NavBarButton";
@@ -16,7 +17,7 @@ const InfoMenuButton = ({ children, ...props }: React.ComponentProps<typeof NavB
       style={{
         '--info-icon-fill': colors.palette.lightBlue,
         ...props.style
-      } as React.CSSProperties}
+      } as CSSPropertiesWithVariables}
       className="info-menu-button"
     >
       {children}

src/components/NavBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CSSPropertiesWithVariables } from '../types';
 import classNames from 'classnames';
 import * as Constants from '../constants';
 import theme from '../theme';
@@ -40,14 +41,14 @@ export const NavBar = ({
     '--navbar-padding-mobile': `${theme.padding.navbar.mobile}rem`,
     '--navbar-padding-desktop': `${theme.padding.navbar.desktop}rem`,
     ...style
-  } as React.CSSProperties;
+  } as CSSPropertiesWithVariables;
 
   const barStyle = {
     '--navbar-max-width': maxWidth ? `${maxWidth}rem` : undefined,
     '--navbar-justify-content': justifyContent,
     '--navbar-height-mobile': `${navMobileHeight || Constants.navMobileHeight}rem`,
     '--navbar-height-desktop': `${navDesktopHeight || Constants.navDesktopHeight}rem`,
-  } as React.CSSProperties;
+  } as CSSPropertiesWithVariables;
 
   return (
     <BodyPortal

src/types/index.ts

@@ -1,3 +1,5 @@
+import type { CSSProperties } from "react";
+
 export type ToastData = {
   id?: string;
   title: string;
@@ -15,3 +17,7 @@ export type SentryError = {
   eventId?: string;
   type?: string;
 };
+
+export type CSSPropertiesWithVariables = CSSProperties & {
+  [key: `--${string}`]: string | number | undefined;
+};