Add support for source maps in unbundled browser mode #112
Conversation
Mirrors changes in da1404e to allow inline source maps in unbundled browser mode. Also fixes a bug that wasn't clearing previous CSS when hot reloading a CSS module.
| style.innerHTML = load.metadata.style; | ||
| document.head.appendChild(style); | ||
| var enableInlineSourceMaps = this.inlineCssSourceMaps && load.metadata.styleSourceMap; | ||
| var cssElements = document[elementsContainerKey] || (document[elementsContainerKey] = {}); |
There was a problem hiding this comment.
Can you clarify what this elementsContainerKey is used for?
There was a problem hiding this comment.
Thanks,
To fix the hot reloading problem (didn't remove previous style), I reuse the same element if the module was previously loaded.
I store refs to the created elements in a hash ( { [address: string]: HTMLStyleElement | HTMLLinkElement } ) and attach it on the document.
elementsContainerKey ("__CSSPluginBase.elements") is just the key I use to attach the hash to the document.
I guess it could also just be a local variable in the module, I was just using document for easier debugging.
There was a problem hiding this comment.
Here's the local variable alternative, must be less confusing :).
https://gist.github.com/guillaume86/bfe5d6a46b92acf164b48f597ecf8662
There was a problem hiding this comment.
Ok, that sounds great. Can we just make this an instance variable though?
In the constructor, we'd initiate this.elementsContainers = {} and then use that in the prototype method.
Let me know if that works for you.
There was a problem hiding this comment.
I'm not familiar with the lifecycle of the plugins, I don't see any objection to moving it to the instance if it works when hot-reloading css modules.
|
This looks great, thanks for the PR! Can you just let me know what the |
Mirrors changes in da1404e to allow inline source maps in unbundled browser mode.
Also fixes a bug that wasn't clearing previous CSS when hot reloading a CSS module.