[Question] How does speedy mode actually work?
Closed this issue · 3 comments
I am extremely curious how Glamor's speedy mode actually work, I hope this wasn't asked before, I tried looking for it to no avail here or on Google.
<style type="text/css" data-glamor=""></style>This harmless looking style tag actually holds all the styles inside of it, somehow... magically? How? What technique is being used here? Nothing on Mozilla's documentation of Style tag says anything about this as well
Great question, I've been meaning to write this up for the longest time. Tldr- it uses this api https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule which bypasses the DOM and injects rules straight into the cssom. You can see how we use this in this file https://github.com/threepointone/glamor/blob/master/src/sheet.js . There are tradeoffs around it, which is why it's enabled only in production. I'll drop a line here when I finally do publish the doc, but I hope this clears things up.
Closing this issue, but feel free to carry on the conversation if you need more info
Thank you! That's an extremely interesting API that I have never seen before, it's amazing how it's also nothing new, in fact exists in IE9, I believe your doc will explain the tradeoffs which will probably be partially why it's not used more often
Can't wait to read your doc once you have time to finish it!