search

Stranger6667 / css-inline

High-performance library for inlining CSS into HTML 'style' attributes
https://css-inline.org/
MIT License
244 stars 29 forks source link

WASM/nodejs throws "Io Error: operation not supported on this platform" if HTML has link to google fonts api #264

Open glove99 opened 1 year ago

glove99 commented 1 year ago

My HTML has links to google font apis:

<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,500,600,700&display=swap" rel="stylesheet">

Running inline() will throw an UnhandledPromiseRejection and kill the nodejs app. The error message is "Io Error: operation not supported on this platform". I replicated on MacOS and a RHEL container.

If I set load_remote_stylesheets: false then the problem stops.

Not sure if there is something specific about the google font api or a larger problem with loading remote stylesheets.

Stranger6667 commented 1 year ago

Hi @glove99

Thank you for reporting and sorry for the confusing error message!

The issue is that our core crate sends requests via attohttpc which does not support WASM. Can you share some code snippets so I can work with them and maybe use them in the test suite?

Probably, the solution will be to switch to reqwest (#246) or make it extendable, so in wasm bindings, we use e.g. web_sys to make network calls

glove99 commented 1 year ago

Ah that makes sense. Here is a simple test case that fails:

  it('replicate remote link error', async () => {
    const html =
      '<html><head>\
      <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap" rel="stylesheet">\
      <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:100,200,300,400,500,600,700&display=swap" rel="stylesheet">\
    </head><body>Test</body></html>';

    const output = inline(html, {});
    console.log(output);
  });
glove99 commented 1 year ago

BTW, while debugging this problem I dived into your project code. Really impressive. I always love learning I don't know near as much as I thought I did. 😄

Stranger6667 commented 1 year ago

@glove99 Sorry for the delay!

Thank you for the reproduction code! Happy to hear that you found the source code useful :) Let me know if you have any questions about it, I'd be happy to chat :)

On the issue side - I will fix the ongoing build failure and then look into switching the library that makes requests in the core crate first (maybe in a couple of weeks) and then will update the WASM bindings.

Stranger6667 commented 11 months ago

FWIW, I updated the error text, so it clearly communicates the current state of things. Network requests are not supported on WASM now (though they work in the new, not yet released napi bindings) + the readme is updated to reflect it too.

Though, it should be possible, here is an example with fetch