Shimming for the broken /deep/ selector in sass

gistfile1.js

var styleSheet = $.grep(document.styleSheets, function(styleSheet){
	return /assets\/css\/main.css/.test(styleSheet.href)
})[0]

$.grep(styleSheet.cssRules, function(rule){
	return /isbn-prices/.test(rule.selectorText)
}).forEach(function(ruleToAdd){
	var modified_selector;
	var original_selector = ruleToAdd.selectorText;
	var style = ruleToAdd.style.cssText;

	original_selector.split(',').forEach(function(selector){
		if(selector.indexOf('isbn-prices')!==-1){
			modified_selector = $.trim(selector).replace(/isbn-prices /, 'isbn-prices /deep/ ')
		}
	});
	console.log(modified_selector+'{ '+style+' }');

	if("insertRule" in styleSheet){
		styleSheet.insertRule(modified_selector+'{'+style+'}');
	}
	else if("addRule" in styleSheet){
		styleSheet.addRule(modified_selector, style);
	}
});

Since sass doesn't currently support the /deep/ selector. Extending off of existing styling would be difficult. One possible solution that is explored here is to write sass pertaining to the custom element and then use this script to pull that styling onto the page in a way that lets it break into the style scope.

Based off of this technique from David Walsh to inject new rules into a style sheet.