When the rel attribute of the link element has multiple values (including stylesheet), it will be ignored.

[siaikin]

The MDN documentation states that the rel attribute can have multiple values separated by whitespace.

The type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords.
HTML Attribute: rel

However, current implementations only match link elements with rel="stylesheet".

https://github.com/gregnb/react-to-print/blob/977b034c10932f91eca13468c2042dc577fcf73d/src/index.tsx#L437

In my use case, I have a link element like this, which causes the associated styles to not work in print preview.

<link rel="prefetch stylesheet" href="..." />

I have found a solution which is to use the ~= CSS selector.

[attr~=value]
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
Attribute Selectors

[siaikin]

I have applied this to my library and the above approach correctly retrieves link elements.

Here is my commit and an example:

• siaikin/vue-to-print@cb66788
• before: https://64be3b69cc824700084c7871--vue-to-print.netlify.app/
• after: https://master--vue-to-print.netlify.app/
  

[MatthewHerbst]

Fascinating, I'm surprised this hasn't come up as a bug before! Thanks for the links, I'll get a fix in this evening! Also, nice package with vue-to-print 🥳 I've been thinking about extracting the non-React logic out of this package into another package that could be consumed by this one and ones like yours, I'll see about doing that this weekend!

[siaikin]

Your level of activity is impressive and very willing to communicate with someone like you.

I had never even heard of the ~= selector before. Additionally, extracting out dependency-free code is definitely a good idea and will be helpful for developers who do not use libraries/frameworks such as Vue/React/Angular, etc.

I investigated the issue further: I am using vitepress to write my documentation, which uses preload to load CSS styles.

https://github.com/vuejs/vitepress/blob/3dab9a6be1b543cf52c7c61f1e439a7973cd6667/src/node/build/render.ts#L69

In the process, I found that the above solution is not perfect, as the as attribute is required when rel="preload". This means that there will be code like this: <link rel="preload" href="style.css" as="style" />.

Attribute rel=preload

Therefore, when querying link elements, it may be necessary to use a selector statement like this: link[rel~="stylesheet"], link[as="style"].

Perhaps you have a better solution.🤔

[MatthewHerbst]

Thank you ❤️

Web is full of surprises, thanks for the additional research! I'll play around with some options and make a PR this weekend

[MatthewHerbst]

Having some issues with npm, but once resolved the fix for this will be in version ^2.14.14. Thanks for reporting this and the research on it! And sorry for the delay here; getting married in a few weeks so have been very busy 😄 💍

[siaikin]

Hi @MatthewHerbst , this is really happy news, please accept my best wishes.

白头偕老，永结同心。💕

Greetings from China.