Handle <link> nodes that have multiple rel values and/or use `rel…

…="preload"` (#646)
MatthewHerbst · Sep 22, 2023 · 5f1c144 · 5f1c144
1 parent 293394a
commit 5f1c144
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 7 deletions.
diff --git a/examples/ComponentToPrint/index.tsx b/examples/ComponentToPrint/index.tsx
@@ -57,6 +57,7 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
           href="../disabled.css"
         />
         <style type="text/css" media="print">{"@page { size: landscape; }"}</style>
+        <link href="./as-style.css" rel="stylesheet" />
         <div className="flash" />
         <table className="testClass">
           <thead>
@@ -66,6 +67,22 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
             </tr>
           </thead>
           <tbody>
+            <tr>
+              <td>
+                Test loading {"<link>"}s with multi-value `rel`
+              </td>
+              <td>
+                <div className="multi-rel">Purple Background</div>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                Test loading {"<link>"}s with `as="style"`
+              </td>
+              <td>
+                <div className="as-style">Blue Background</div>
+              </td>
+            </tr>
             <tr>
               <td>Canvass</td>
               <td>

diff --git a/examples/index.html b/examples/index.html
@@ -3,6 +3,8 @@
 <head>
     <title>ReactToPrint Examples</title>
     <link href="./title.css" rel="stylesheet" type="text/css" />
+    <link href="./double-rel.css" rel="prefetch stylesheet" type="text/css" />
+    <link href="./as-style.css" rel="preload" as="style" />
     <link disabled href="./disabled.css" rel="stylesheet" type="text/css" />
     <link disabled="true" href="./disabled.css" rel="stylesheet" type="text/css" />
     <link disabled="false" href="./disabled.css" rel="stylesheet" type="text/css" />
@@ -40,5 +42,4 @@
     </style>
     <div id="app-root" />
 </body>
-</html>
-
+</html>
diff --git a/examples/styles/as-style.css b/examples/styles/as-style.css
@@ -0,0 +1,5 @@
+.as-style {
+    background-color: blue;
+    height: 20px;
+    width: 100%;
+}
diff --git a/examples/styles/double-rel.css b/examples/styles/double-rel.css
@@ -0,0 +1,5 @@
+.multi-rel {
+    background-color: purple;
+    height: 20px;
+    width: 100%;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -254,14 +254,14 @@ export default class ReactToPrint extends React.Component<IReactToPrintProps> {
         const clonedContentNodes = contentNodes.cloneNode(true);
         const isText = clonedContentNodes instanceof Text;
 
-        const globalStyleLinkNodes = document.querySelectorAll("link[rel='stylesheet']");
+        const globalLinkNodes = document.querySelectorAll("link[rel~='stylesheet'], link[as='style']");
         const renderComponentImgNodes = isText ? [] : (clonedContentNodes as Element).querySelectorAll("img");
         const renderComponentVideoNodes = isText ? [] : (clonedContentNodes as Element).querySelectorAll("video");
 
         const numFonts = fonts ? fonts.length : 0;
 
         this.numResourcesToLoad =
-            globalStyleLinkNodes.length +
+            globalLinkNodes.length +
             renderComponentImgNodes.length +
             renderComponentVideoNodes.length +
             numFonts;
@@ -434,9 +434,10 @@ export default class ReactToPrint extends React.Component<IReactToPrintProps> {
                 }
 
                 if (copyStyles) {
-                    const headEls = document.querySelectorAll("style, link[rel='stylesheet']");
-                    for (let i = 0, headElsLen = headEls.length; i < headElsLen; ++i) {
-                        const node = headEls[i];
+                    const styleAndLinkNodes = document.querySelectorAll("style, link[rel~='stylesheet'], link[as='style']");
+
+                    for (let i = 0, styleAndLinkNodesLen = styleAndLinkNodes.length; i < styleAndLinkNodesLen; ++i) {
+                        const node = styleAndLinkNodes[i];
 
                         if (node.tagName.toLowerCase() === 'style') { // <style> nodes
                             const newHeadEl = domDoc.createElement(node.tagName);