Auto SASS Compile

lib.js

(() => {
  const sass = new Sass();

  const handleFiles = () => {
    Array.from(document.querySelectorAll(`style[type="text/sass"], style[type="text/scss"]`)).map(val => {
      sass.compile(val.innerHTML, {
        indentedSyntax: val.getAttribute("type") === "text/sass"
      }, ({
        text
      }) => val.innerHTML = text);
      val.removeAttribute("type")
    })

    Array.from(document.querySelectorAll(`link[rel="stylesheet"][href][type="text/sass"], link[rel="stylesheet"][href][type="text/scss"]`)).map(val => fetch(val.getAttribute("href"))
      .then(res => res.text())
      .then(data => sass.compile(data, {
        indentedSyntax: val.getAttribute("type") === "text/sass"
      }, ({
        text
      }) => {
        const el = val.parentNode

        const newEl = document.createElement('style');
        newEl.innerHTML = text

        el.parentNode.replaceChild(newEl, el);
      })))
  }

  handleFiles()

  new MutationObserver((mutationList, observer) => {
    mutationList.forEach((mutation) => {
      if (["style", "link"].indexOf(mutation.target.localName) >= 0 && ["text/sass", "text/scss"].indexOf(mutation.target.getAttribute("type")) >= 0) handleFiles()
    });
  }).observe(document, {
    childList: true,
    attributes: true,
    subtree: true
  })
})()