"," Inspired by Philip Walton’s blog post about polyfilling CSS, we will create two functions in separate
files within src/ called getPageStyles.js and replacePageStyles.js.
\f Understanding the tools to write a CSS polyfill from scratch 201","The getPageStyles function gathers all CSS from every linked CSS file and style tag (except
inline styles) and returns their content as a single CSS string:
const getPageStyles = () => {
  // Query the document for any element that could have
    styles.
  const styleElements = [...document.querySelectorAll
    ('style, link[rel=\"stylesheet\"]')]","   // Fetch all styles and ensure the results are in","      document order.","   // Resolve with a single string of CSS text.","   return Promise.all(styleElements.map((el) => {","     if (el.href) {","       return fetch(el.href).then((response) =>","         response.text());","     } else {","       return el.innerHTML;","     }","   })).then((stylesArray) => stylesArray.join('\\n'))"," module.exports = getPageStyles","The replacePageStyles function removes all of these elements and appends a single style tag
with our transformed CSS, essentially replacing all pre-loaded styles:
const replacePageStyles = (css) => {
  // Get a reference to all existing style elements.
  const existingStyles = [...document.querySelectorAll
    ('style, link[rel=\"stylesheet\"]')];","   // Create a new