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
guillaume86 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 numberDiff line numberDiff 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] = {});

@guybedfordguybedfordOct 18, 2016

Copy link
Copy Markdown
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?

@guillaume86guillaume86Oct 18, 2016•
edited
Loading

Copy link
Copy Markdown
Author

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.

@guillaume86guillaume86Oct 18, 2016

Copy link
Copy Markdown
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

@guybedfordguybedfordOct 19, 2016

Copy link
Copy Markdown
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.

@guillaume86guillaume86Oct 19, 2016

Copy link
Copy Markdown
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;