Support publicURL

[theKashey]

Sometimes CSS files are hosted on other domain, and resources used in CSS would refer to other domains.

useStyles should support publicURL as well as the ability to rewrite url in, for example, backgrounds.

[malonecj]

Hi, is this issue planned to be worked on?

[theKashey]

Yep, still needed and still planned.

[malonecj]

I could potentially help implement if you like.

I am investigating this library at the moment. It looks like it could be the best fit so far since we use node steam rendering and I have not found any other library which delivers critical css for this use case. Right now, I am trying to get the streamed interleaving example working for my development environment but with no luck. Use of multistream does not seem to deliver all streams, only the first one.

If I can get this working then I would be happy to help with this issue of supporting pubic Url since on our prod environment the assets are hosted on a different server.

[theKashey]

Take a look at this PR where all usages of multistream were removed - streams are actually quite flexible. However feel free to share your code example, probably you have an issue with autoclose, ie missing something like

styledStream.pipe(res, {
  end: false
});

[eseQ]

Ok, I think webpack-dev-server (and similar) the same case. Am I right?

[theKashey]

you need SSR in order to run into such issue during dev mode. Current this is how I am adding prefix to extracted CSS in my SSR code:

const prefixURL = (prefix: string, url: string) => {
  if (url.startsWith("http") || url.startsWith("data")) {
    return url;
  }
  if (url.startsWith("/")) {
    return `${prefix}${url}`;
  }
  return `${prefix}/${url}`;
};

const replacer = (prefix: string) => (match: string, host: string) => match.split(host).join(prefixURL(prefix, host));
export const prefixStyles = (styles: string, prefix: string) =>
  styles.replace(/url\(([^)]*)/g, replacer(prefix));

[eseQ]

@theKashey I talk about discoverProjectStyles and getting critical styles. discoverProjectStyles want directory for it.

[theKashey]

This issue is about postprocessing known styles to reflect their placement from the browser point of view. Script files are always expected to be discoverable. If they not - then it's not gonna work at all.