scopedCSS.js

const stylesheets = {};

export const injectStyles = ({ fileScopeId, css, mountNode = document.head }) => {
  let stylesheet = stylesheets[fileScopeId];

  if (!stylesheet) {
    const styleEl = document.createElement('style');
    styleEl.setAttribute('type', 'text/css');

    stylesheet = stylesheets[fileScopeId] = styleEl;
    if (mountNode !== document.head) {
      styleEl.setAttribute('scoped', '');
    }
    mountNode.appendChild(styleEl);
  }

  stylesheet.innerHTML = css;

  for (let i = 0; i < stylesheet.sheet.cssRules.length; i++) {
    const rule = stylesheet.sheet.cssRules[i];
    rule.selectorText = `.${mountNode.className} ${rule.selectorText}`;
    stylesheet.sheet.deleteRule(i);
    stylesheet.sheet.insertRule(rule.cssText);
  }
};