check-if-css-is-disabled/dist/check-if-css-is-disabled.mjs.map

☂️ Frontend JavaScript module that can determine if CSS is disabled or if it failed to load, then take action to stop JS enhancements from applying if the CSS isn't working first.

{"version":3,"file":"check-if-css-is-disabled.mjs","mappings":";;;;;cAAAA,OAAOC,QAAWC,SAChB,MAAMC,YAAcD,QAAQC,UAC5B,MAAMC,YAAcF,QAAQE,aAAe;uCAG3CC;SAASC,iBAAiB,0BAA0BC,SAAQC,OAC1DA,KAAKC,iBAAiB,QAASC,4BAA2B;uEAI5D;MAAMC,SAAW,IAAIC,OAAOC,kBAAkBC,gBAC5C,IAAK,MAAMC,YAAYD,cACrB,GAAIC,SAASC,OAAS,YACpBD,SAASE,WAAWV,SAAQW,OAC1B,GAAIA,KAAKC,UAAY,QAAUD,KAAKE,MAAQ,aAC1CF,KAAKT,iBAAiB,QAASC,4BACjC,GAGN;+CAIFC;SAASU,QAAQhB,SAASiB,KAAM,CAAEC,UAAW,KAAMC,QAAS,OAE5D,SAASd,4BAA6Be,YACpC,GAAIA,WAAYb,OAAOc,aAAe;uFAGtC;IAAKvB,WAAaS,OAAOc,aAAc,CACrC,IAAK,MAAMlB,QAAQH,SAASC,iBAAiB,0BAA2B,IAAKF,YAAYuB,SAASnB,KAAKoB,IAAKpB,KAAKqB,SACjH,IAAK,MAAMC,SAASzB,SAASC,iBAAiB,SAAU,IAAKF,YAAYuB,SAASG,MAAMF,IAAKE,MAAMD,QACrG,CACA,GAAIjB,OAAOc,aAAc,CACvBd,OAAOmB,cAAc,IAAIC,YAAY,cAAe,CAClDC,OAAQ,CACNC,QAAS,iIAGb,OAAO,IACT,MAAO,QAAST,4JAClB;;kDAGA;IAAIU,YAAc,iCAClB;MAAMC,YAAc/B,SAASgC,cAAc,OAC3CD,YAAYN,MAAMQ,SAAW,WAC7BjC,SAASkC,KAAKC,YAAYJ,aAC1BD,YAAc9B,SAASoC,YAAYC,iBAAiBN,YAAa,MAAMO,iBAAiB,cAAgB,SACxGtC,SAASkC,KAAKK,YAAYR;oHAG1B;GAAIjC,UACF,GAAIgC,YAAa,CACfvB,OAAOmB,cAAc,IAAIC,YAAY,cAAe,CAClDC,OAAQ,CACNC,QAAS,0GAGb,OAAO,IACT,MAAO,OAAOxB;AAEd,GAAIyB,aAAezB,8BAA+B,MAAM,IAAImC,MAAM,4GAC7D,OAAO,KACd;;;;;QC/DF,IAAIC,yBAA2B,CAAC;;;QAGhC,SAASC,oBAAoBC;;QAE5B,IAAIC,aAAeH,yBAAyBE;QAC5C,GAAIC,oBAAiBC;QACpB,OAAOD,aAAahD;;;QAGrB,IAAID,OAAS8C,yBAAyBE,UAAY;;;QAGjD/C,QAAS,CAAC;;;;QAIXkD,oBAAoBH,UAAUhD,OAAQA,OAAOC,QAAS8C;;;QAGtD,OAAO/C,OAAOC;QACf;;;;;;;QCnB0B8C,oBAAoB","sources":["webpack://check-if-css-is-disabled/./check-if-css-is-disabled.js","webpack://check-if-css-is-disabled/webpack/bootstrap","webpack://check-if-css-is-disabled/webpack/startup"],"sourcesContent":["module.exports = (params) => {\n  const justCheck = !!params?.justCheck\n  const exemptedIds = params?.exemptedIds || []\n\n  // check if any CSS assets fail to load\n  document.querySelectorAll('link[rel=\"stylesheet\"]').forEach(link => {\n    link.addEventListener('error', handleCssAssetFailingToLoad)\n  })\n\n  // use MutationObserver to attach error event listener to new link tags\n  const observer = new window.MutationObserver((mutationsList) => {\n    for (const mutation of mutationsList) {\n      if (mutation.type === 'childList') {\n        mutation.addedNodes.forEach(node => {\n          if (node.tagName === 'LINK' && node.rel === 'stylesheet') {\n            node.addEventListener('error', handleCssAssetFailingToLoad)\n          }\n        })\n      }\n    }\n  })\n\n  // start observing the document for added nodes\n  observer.observe(document.head, { childList: true, subtree: true })\n\n  function handleCssAssetFailingToLoad (errorEvent) {\n    if (errorEvent) window.linkTagError = true\n\n    // remove all stylesheets if any fail to load, but only if the justCheck flag is falsey\n    if (!justCheck && window.linkTagError) {\n      for (const link of document.querySelectorAll('link[rel=\"stylesheet\"]')) if (!exemptedIds.includes(link.id)) link.remove()\n      for (const style of document.querySelectorAll('style')) if (!exemptedIds.includes(style.id)) style.remove()\n    }\n    if (window.linkTagError) {\n      window.dispatchEvent(new CustomEvent('cssDisabled', {\n        detail: {\n          message: 'At least one stylesheet failed to load. It is unsafe to execute any further JavaScript if the CSS has not loaded properly.'\n        }\n      }))\n      return true\n    } else return !!errorEvent // return true if this function is called by an error event and return false if it is called directly below and no previous error has been logged\n  }\n\n  // test if the browser has explicitly disabled CSS\n  let cssDisabled = false // must be proven otherwise\n  const testElement = document.createElement('div')\n  testElement.style.position = 'absolute'\n  document.body.appendChild(testElement)\n  cssDisabled = document.defaultView.getComputedStyle(testElement, null).getPropertyValue('position') === 'static'\n  document.body.removeChild(testElement)\n\n  // if the justCheck flag is present, we only want to notify the developer that CSS is disabled, not take any actions\n  if (justCheck) {\n    if (cssDisabled) {\n      window.dispatchEvent(new CustomEvent('cssDisabled', {\n        detail: {\n          message: 'CSS is disabled. It is unsafe to execute any further JavaScript if the CSS has not loaded properly.'\n        }\n      }))\n      return true\n    } else return handleCssAssetFailingToLoad()\n  } else { // if the justCheck flag is not present, then stop execution of the JS if CSS is disabled\n    if (cssDisabled || handleCssAssetFailingToLoad()) throw new Error('CSS is disabled. It is unsafe to execute any further JavaScript if the CSS has not loaded properly.')\n    else return false\n  }\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// startup\n// Load entry module and return exports\n// This entry module is referenced by other modules so it can't be inlined\nvar __webpack_exports__ = __webpack_require__(\"./check-if-css-is-disabled.js\");\n"],"names":["module","exports","params","justCheck","exemptedIds","document","querySelectorAll","forEach","link","addEventListener","handleCssAssetFailingToLoad","observer","window","MutationObserver","mutationsList","mutation","type","addedNodes","node","tagName","rel","observe","head","childList","subtree","errorEvent","linkTagError","includes","id","remove","style","dispatchEvent","CustomEvent","detail","message","cssDisabled","testElement","createElement","position","body","appendChild","defaultView","getComputedStyle","getPropertyValue","removeChild","Error","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__"],"sourceRoot":""}