import listToStyles from './listToStyles' export default function addStylesToShadowDOM (parentId, list, shadowRoot) { var styles = listToStyles(parentId, list) addStyles(styles, shadowRoot) } /* type StyleObject = { id: number; parts: Array } type StyleObjectPart = { css: string; media: string; sourceMap: ?string } */ function addStyles (styles /* Array */, shadowRoot) { const injectedStyles = shadowRoot._injectedStyles || (shadowRoot._injectedStyles = {}) for (var i = 0; i < styles.length; i++) { var item = styles[i] var style = injectedStyles[item.id] if (!style) { for (var j = 0; j < item.parts.length; j++) { addStyle(item.parts[j], shadowRoot) } injectedStyles[item.id] = true } } } function createStyleElement (shadowRoot) { var styleElement = document.createElement('style') styleElement.type = 'text/css' shadowRoot.appendChild(styleElement) return styleElement } function addStyle (obj /* StyleObjectPart */, shadowRoot) { var styleElement = createStyleElement(shadowRoot) var css = obj.css var media = obj.media var sourceMap = obj.sourceMap if (media) { styleElement.setAttribute('media', media) } if (sourceMap) { // https://developer.chrome.com/devtools/docs/javascript-debugging // this makes source maps inside style tags work properly in Chrome css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */' // http://stackoverflow.com/a/26603875 css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */' } if (styleElement.styleSheet) { styleElement.styleSheet.cssText = css } else { while (styleElement.firstChild) { styleElement.removeChild(styleElement.firstChild) } styleElement.appendChild(document.createTextNode(css)) } }