Does browser always refetch if the new created link tag has the same `href` ?

[JSerFeng]

What's the purpose for setting preload rel after fetching the new style

When a css file updates, mini-css-extract will fetch the new link tag, and once done, it will set rel as preload and as as css.

https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L1103-L1107

Is this just for disabling the new style rendering ?

Make a link whose href is the same with an already loaded link tag, will browser fetch the new style ?

I have a link tag whose href is foo.css, and the update happens fast, mini-css-extract creates an new link tag, whose href is still foo.css, but sometimes the browser doesn't make request at all, I assume that this is the default behavior for browsers: when you create a link tag whose href is the same as an already loaded tag in a short time, browsers can assume these 2 tags are the same and do not make requests.

This happens usually when enable lazy compilation

I tried to find out in HTML spec and Dom spec but no luck, maybe is my carelessness. Still trying to make an repro.

[JSerFeng]

I tried a demo

const firstLink = document.createElement("link");
firstLink.rel = "stylesheet";
firstLink.href = "/src/style.css";
document.head.appendChild(firstLink);

const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "/src/style.css";

setTimeout(() => {
  document.head.appendChild(link);
}, 70);

On my mac, whether the browser fetches new style is unstable 🤔

[alexander-akait]

Is this just for disabling the new style rendering ?

Yes

This happens usually when enable lazy compilation

Looks like browser is trying to collect tasks into less tasks and avoid extra action

What is the browser? Do you try other? Maybe a bug, because the last tasks should be completed always...

Especially we are using ? query request - https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/hmr/hotModuleReplacement.js#L176, it means this task should be always new and cannot be batched

in webpack for built-in CSS we rewrite this logic...

[JSerFeng]

What is the browser? Do you try other?

I tried chrome and safari for mac, and they behave the same.

Especially we are using ? query request

Yeah, but it only happens for updated css module, if some newly created css modules are split into the same chunk as last compilation, then css-extract will go fetching the new chunk, not updateCss().

No need to hurry tho, I'll try make a minimum repro.

Oh btw,

in webpack for built-in CSS we rewrite this logic...

Is there any plan that the runtime will be refactored to the same logic as webpack's built-in css

[alexander-akait]

Is there any plan that the runtime will be refactored to the same logic as webpack's built-in css

Honestly, we can do it, but I'm not sure it's worth spending time on it. In the near future, we plan to focus on CSS and complete finish built-in CSS support (around 70-80% is already finished)

[JSerFeng]

In the near future, we plan to focus on CSS and complete finish built-in CSS support (around 70-80% is already finished)

Sure

around 70-80% is already finished

Is there anything we can help or what's left on the roadmap, we are glad to contribute.

[alexander-akait]

@JSerFeng Here is a link - webpack/webpack#14893, currently composes is the next step

[JSerFeng]

compose has already been implemented in Rspack, if you are happy with current implementation, we're glad to land it to webpack

[alexander-akait]

@JSerFeng Feel free to send a PR, I will look, there are a lot of tests here - https://github.com/css-modules/postcss-modules-extract-imports/tree/master/test/test-cases