Ensure style and links are included for inheritCSS (#48)

* Ensure style and links are included for inheritCSS * bump version to 1.3.3 Co-authored-by: SL-SWoods <[email protected]>
finos · Jan 29, 2020 · df9136e · df9136e
1 parent a3a07bd
commit df9136e
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/src/pages/childWindow/ChildWindow.module.css b/demo/src/pages/childWindow/ChildWindow.module.css
@@ -31,3 +31,7 @@ label {
 .checkboxes {
     margin-bottom: 20px;
 }
+
+.external_style code {
+    color: navy;
+}
diff --git a/demo/src/pages/childWindow/ChildWindow.tsx b/demo/src/pages/childWindow/ChildWindow.tsx
@@ -20,7 +20,7 @@ const INITIAL_TEXT_AREA_VALUE: string = `<div class="App_containerApp__F0W0w">
 </div>`;
 const CHILD_BODY_AS_HOOK_OPTION = (
     <div className="App_containerApp__F0W0w">
-        <p>
+        <p className="ChildWindow_external_style__2s3g_">
             This jsx was passed in as a part of <code>CHILD_WINDOW_HOOK_OPTIONS</code>
             . See "Code Example" Section for more information.
     </p>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openfin-react-hooks",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "A collection of React Hooks built on top of the Openfin API",
   "main": "dist/index.js",
   "scripts": {

diff --git a/src/useChildWindow.ts b/src/useChildWindow.ts
@@ -30,8 +30,11 @@ export default ({
 
     const inheritCss = useCallback(() => {
         if (parentDocument && htmlDocument) {
-            const parentStyles = parentDocument.getElementsByTagName("style");
-            injectNodes(parentStyles, htmlDocument);
+            const externalStyles =  parentDocument.styleSheets;
+            // tslint:disable-next-line: prefer-for-of
+            for (let i = 0; i < externalStyles.length; i ++ ) {
+                injectNode(externalStyles[i].ownerNode, htmlDocument);
+            }
         }
     }, [parentDocument, injectNodes, htmlDocument]);
 

diff --git a/src/utils/helpers/inject.ts b/src/utils/helpers/inject.ts
@@ -1,5 +1,5 @@
 export const injectNode = (
-    node: HTMLStyleElement | HTMLScriptElement,
+    node: HTMLStyleElement | HTMLScriptElement | Node,
     document: HTMLDocument,
 ) => {
     if (document) {