Skip to content

Instantly share code, notes, and snippets.

@guillaume86
Created October 18, 2016 15:36
Show Gist options
  • Save guillaume86/bfe5d6a46b92acf164b48f597ecf8662 to your computer and use it in GitHub Desktop.
Save guillaume86/bfe5d6a46b92acf164b48f597ecf8662 to your computer and use it in GitHub Desktop.
Alternative method
/*
* <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 elementsContainer = {};
CSSPluginBase.prototype.instantiate = function(load) {
if (this.builder)
return;
var enableInlineSourceMaps = this.inlineCssSourceMaps && load.metadata.styleSourceMap;
var element = elementsContainer[load.address];
if (!enableInlineSourceMaps) {
elementsContainer[load.address] = cssInject(element, load.metadata.style);
} else {
var cssOutput = load.metadata.style
+ '\n/*# sourceMappingURL=data:application/json,'
+ encodeURIComponent(load.metadata.styleSourceMap) + '*/';
elementsContainer[load.address] = cssInjectSourceMaps(element, cssOutput);
}
};
module.exports = CSSPluginBase;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment