diff --git a/examples/ComponentToPrint/index.tsx b/examples/ComponentToPrint/index.tsx
index ce884af..b27b8b1 100644
--- 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
index f55c5a1..a329589 100755
--- 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>
\ No newline at end of file
diff --git a/examples/styles/as-style.css b/examples/styles/as-style.css
new file mode 100644
index 0000000..f1cda3a
--- /dev/null
+++ b/examples/styles/as-style.css
@@ -0,0 +1,5 @@
+.as-style {
+    background-color: blue;
+    height: 20px;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/examples/styles/double-rel.css b/examples/styles/double-rel.css
new file mode 100644
index 0000000..e12ff2e
--- /dev/null
+++ b/examples/styles/double-rel.css
@@ -0,0 +1,5 @@
+.multi-rel {
+    background-color: purple;
+    height: 20px;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 216b81c..b29c38b 100644
--- 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);

+ Test loading {""}s with multi-value `rel` +	+ Purple Background +
+ Test loading {""}s with `as="style"` +	+ Blue Background +
Canvass	diff --git a/examples/index.html b/examples/index.html index f55c5a1..a329589 100755 --- a/examples/index.html +++ b/examples/index.html @@ -3,6 +3,8 @@ ReactToPrint Examples + + @@ -40,5 +42,4 @@ - - + \ No newline at end of file diff --git a/examples/styles/as-style.css b/examples/styles/as-style.css new file mode 100644 index 0000000..f1cda3a --- /dev/null +++ b/examples/styles/as-style.css @@ -0,0 +1,5 @@ +.as-style { + background-color: blue; + height: 20px; + width: 100%; +} \ No newline at end of file diff --git a/examples/styles/double-rel.css b/examples/styles/double-rel.css new file mode 100644 index 0000000..e12ff2e --- /dev/null +++ b/examples/styles/double-rel.css @@ -0,0 +1,5 @@ +.multi-rel { + background-color: purple; + height: 20px; + width: 100%; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 216b81c..b29c38b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -254,14 +254,14 @@ export default class ReactToPrint extends React.Component { 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 { } 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') { //