Skip to content
This repository was archived by the owner on Oct 9, 2020. It is now read-only.

Add support for source maps in unbundled browser mode #112

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add support for source maps in unbundled browser mode #112

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 41 additions & 4 deletions css-plugin-base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,51 @@ CSSPluginBase.prototype.listAssets = function(loads, opts) {
* <style> injection browser plugin
*/
// NB hot reloading support here

function cssInject(style, css) {
if (style) {
style.innerHTML = css;
} else {
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.head.appendChild(style);
}
return style;
}

// NB the <link> + blob URL trick is required to make chrome detect the source maps
function cssInjectSourceMaps(link, css) {
var href = URL.createObjectURL(new Blob([css], { type:'text/css' }));;
if (link) {
link.href = href;
} else {
link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
document.head.appendChild(link);
}
return link;
}

var elementsContainerKey = '__CSSPluginBase.elements';
CSSPluginBase.prototype.instantiate = function(load) {
if (this.builder)
return;

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = load.metadata.style;
document.head.appendChild(style);
var enableInlineSourceMaps = this.inlineCssSourceMaps && load.metadata.styleSourceMap;
var cssElements = document[elementsContainerKey] || (document[elementsContainerKey] = {});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you clarify what this elementsContainerKey is used for?

Copy link
Author

@guillaume86 guillaume86 Oct 18, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's the local variable alternative, must be less confusing :).
https://gist.github.com/guillaume86/bfe5d6a46b92acf164b48f597ecf8662

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

var element = cssElements[load.address];

if (!enableInlineSourceMaps) {
cssElements[load.address] = cssInject(element, load.metadata.style);
} else {
var cssOutput = load.metadata.style
+ '\n/*# sourceMappingURL=data:application/json,'
+ encodeURIComponent(load.metadata.styleSourceMap) + '*/';

cssElements[load.address] = cssInjectSourceMaps(element, cssOutput);
}
};

module.exports = CSSPluginBase;