Copilot suggestions

Card.css import order issue

Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: RoyEJohnson

src/app/components/DynamicContentStyles.tsx

@@ -72,26 +72,40 @@ const DynamicContentStyles = React.forwardRef<HTMLElement, DynamicContentStylesP
   const [dataDynamicStyle, styles] = getStyles(disable, queryStyles, book, bookStylesUrl, archiveLoader);
 
   // Inject dynamic styles into a <style> tag
-  React.useEffect(() => {
-    if (!styles || typeof document === 'undefined') {
-      return;
+React.useEffect(() => {
+  if (!styles || typeof document === 'undefined') {
+    return;
+  }
+
+  const globalKey = '__rexDynamicContentStyles__';
+  const globalStore = globalThis as any;
+  const store = (globalStore[globalKey] ||= {
+    count: 0,
+    element: null as HTMLStyleElement | null,
+  });
+
+  store.count += 1;
+
+  if (!store.element || !document.head.contains(store.element)) {
+    store.element = document.createElement('style');
+    store.element.setAttribute('data-dynamic-content-styles', 'true');
+    document.head.appendChild(store.element);
+  }
+
+  store.element.textContent = `
+    [data-dynamic-style="true"] {
+      ${styles}
     }
+  `;
 
-    // Create a <style> element with scoped styles
-    const styleElement = document.createElement('style');
-    styleElement.setAttribute('data-dynamic-content-styles', 'true');
-    styleElement.textContent = `
-      [data-dynamic-style="true"] {
-        ${styles}
-      }
-    `;
-    document.head.appendChild(styleElement);
-
-    // Cleanup function to remove the style element when component unmounts or styles change
-    return () => {
-      document?.head.removeChild(styleElement); // no document returns early
-    };
-  }, [styles]);
+  return () => {
+    store.count -= 1;
+    if (store.count <= 0 && store.element) {
+      store.element.remove();
+      store.element = null;
+    }
+  };
+}, [styles]);
 
   return <div data-dynamic-style={dataDynamicStyle} {...otherProps} ref={ref}>
     {children}

src/app/notifications/components/Card.css

@@ -25,6 +25,18 @@
   padding: 1rem;
 }
 
+.notification-p a,
+.notification-header a {
+  color: #027eb5;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.notification-p a:hover,
+.notification-header a:hover {
+  color: #0064a0;
+}
+
 @media (max-width: 75em) {
   .notification-p {
     padding: 0;

src/app/notifications/components/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import theme from '../../theme';
-import './Card.css';
+/* CSS imported in src/app/notifications/index.ts */
 
 interface GroupProps extends React.HTMLAttributes<HTMLDivElement> {
   theme?: unknown;

src/app/notifications/index.ts

@@ -1,6 +1,7 @@
 import * as actions from './actions';
 import * as hooks from './hooks';
 import reducer from './reducer';
+import './components/Card.css';
 
 export {
   actions,