blob links seem applied to the dom after js execution occasionally

[wusiquan]

hi, I found the sentence in README

when style loader is used with { options: { sourceMap: true } } option, the CSS modules will be generated as Blobs...

then I enabled the soruceMap option, see the page in the latest Chrome(70.0.3538.110) when developing.

and js seems executed before the css applied to the dom occasionally, for instance, the page I write used swiper plugin, which calculate the slideSize would get the wrong size occasionally
is it a chrome's bug? or the blob related problem?

[alexander-akait]

@wusiquan It can happen, you need load styles first when init swiper, use import().then().catch() for this. Looks swiper use height or width styles to calculate something

[wusiquan]

@evilebottnawi Thank you for your replying.
I tried the import() way, Promise('./index.scss', './swiper.scss').all(() => new Swiper(...))
but this time the swiper always calculate the wrong value...

After digging into the waterfall, I found the parse blob stylesheet section was hehind the execution

so, for temporoly solution, set the sourceMap option to false or init swiper in window.onload callback function, which let swiper plugin calculate the right value internally

[alexander-akait]

@wusiquan can you create minimum reproducible test repo, maybe we can fix it in future

[wusiquan]

ok, please wait a while...I'll paste the repo link url

[wusiquan]

all right, the repo has been created

[alexander-akait]

@wusiquan thanks!

[wusiquan]

@evilebottnawi the same thanks to you. Hope it can help you reproduct.

[rafaeldeoliveira]

This also happens in a project I'm working on. But not occasionally, the styles always seems to be applied after js execution when using source maps.

[flut1]

I encountered this as well in a VueJS project. After vue has rendered the page (in the mounted() hook) I can see that the <style> tags have been inserted with blobs, but the styles are not applied to the page yet. If I wait a single tick (setTimeout of 0) the styles have been applied

Setting sourceMap to false also resolves the issue for me

[ghost]

Same problem here :/.
Any better fix found?

[flut1]

@4WakeStudio Not a real fix but a workaround. We now have a little util function that returns a Promise when all stylesheets have loaded. You can use that to delay code that depends on the styles being applied.

waitForStyleSheetsLoaded(document).then(() => { /* styles are now loaded */ });

See:
https://github.com/riccoarntz/vue-skeleton/blob/5c6e393abeb352df3c9f17b3a8a6ba411d80559e/src/util/waitForStyleSheetsLoaded.ts

[ke1vin4real]

Not occasionally. Only safari works correctly with blob links now

[larixer]

@evilebottnawi Thanks, could you also publish style-loader with the #383 fix merged?

[alexander-akait]

@Vlasenko we have some tasks for new release, so just wait, i think we can do release on next week