From 7bbe44a029ede5c9e09b96678a44b0e40580f619 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 1 Feb 2022 12:20:52 -0800
Subject: [PATCH] website: display warning in IE 11 (#1829)

* feat: display warning in IE 11

* Use innerHTML instead of manual DOM

Co-authored-by: Randall Morey <randall@hashicorp.com>

* link to HashiCorp IE11 deprecation page

Co-authored-by: Randall Morey <randall@hashicorp.com>
---
 website/pages/_document.js             |   2 +-
 website/public/ie-custom-properties.js | 769 -------------------------
 website/public/ie-warning.js           |  31 +
 3 files changed, 32 insertions(+), 770 deletions(-)
 delete mode 100644 website/public/ie-custom-properties.js
 create mode 100644 website/public/ie-warning.js

diff --git a/website/pages/_document.js b/website/pages/_document.js
index 9f061de14..3d7c07aed 100644
--- a/website/pages/_document.js
+++ b/website/pages/_document.js
@@ -19,7 +19,7 @@ export default class MyDocument extends Document {
           <script
             noModule
             dangerouslySetInnerHTML={{
-              __html: `window.MSInputMethodContext && document.documentMode && document.write('<script src="/ie-custom-properties.js"><\\x2fscript>');`,
+              __html: `window.MSInputMethodContext && document.documentMode && document.write('<script src="/ie-warning.js"><\\x2fscript>');`,
             }}
           />
         </body>
diff --git a/website/public/ie-custom-properties.js b/website/public/ie-custom-properties.js
deleted file mode 100644
index 529dfc620..000000000
--- a/website/public/ie-custom-properties.js
+++ /dev/null
@@ -1,769 +0,0 @@
-/*! ie11CustomProperties.js v3.1.0 | MIT License | https://git.io/fjXMN */
-!(function () {
-  'use strict'
-
-  // check for support
-  var testEl = document.createElement('i')
-  testEl.style.setProperty('--x', 'y')
-  if (testEl.style.getPropertyValue('--x') === 'y' || !testEl.msMatchesSelector)
-    return
-
-  if (!Element.prototype.matches)
-    Element.prototype.matches = Element.prototype.msMatchesSelector
-
-  var listeners = [],
-    root = document,
-    Observer
-
-  function qsa(el, selector) {
-    try {
-      return el.querySelectorAll(selector)
-    } catch (e) {
-      // console.warn('the Selector '+selector+' can not be parsed');
-      return []
-    }
-  }
-  function onElement(selector, callback) {
-    var listener = {
-      selector: selector,
-      callback: callback,
-      elements: new WeakMap(),
-    }
-    var els = qsa(root, listener.selector),
-      i = 0,
-      el
-    while ((el = els[i++])) {
-      listener.elements.set(el, true)
-      listener.callback.call(el, el)
-    }
-    listeners.push(listener)
-    if (!Observer) {
-      Observer = new MutationObserver(checkMutations)
-      Observer.observe(root, {
-        childList: true,
-        subtree: true,
-      })
-    }
-    checkListener(listener)
-  }
-  function checkListener(listener, target) {
-    var i = 0,
-      el,
-      els = []
-    try {
-      target && target.matches(listener.selector) && els.push(target)
-    } catch (e) {}
-    if (loaded) {
-      // ok? check inside node on innerHTML - only when loaded
-      Array.prototype.push.apply(els, qsa(target || root, listener.selector))
-    }
-    while ((el = els[i++])) {
-      if (listener.elements.has(el)) continue
-      listener.elements.set(el, true)
-      listener.callback.call(el, el)
-    }
-  }
-  function checkListeners(inside) {
-    var i = 0,
-      listener
-    while ((listener = listeners[i++])) checkListener(listener, inside)
-  }
-  function checkMutations(mutations) {
-    var j = 0,
-      i,
-      mutation,
-      nodes,
-      target
-    while ((mutation = mutations[j++])) {
-      ;(nodes = mutation.addedNodes), (i = 0)
-      while ((target = nodes[i++]))
-        target.nodeType === 1 && checkListeners(target)
-    }
-  }
-
-  var loaded = false
-  document.addEventListener('DOMContentLoaded', function () {
-    loaded = true
-  })
-
-  // svg polyfills
-  function copyProperty(prop, from, to) {
-    var desc = Object.getOwnPropertyDescriptor(from, prop)
-    Object.defineProperty(to, prop, desc)
-  }
-  if (!('classList' in Element.prototype)) {
-    copyProperty('classList', HTMLElement.prototype, Element.prototype)
-  }
-  if (!('innerHTML' in Element.prototype)) {
-    copyProperty('innerHTML', HTMLElement.prototype, Element.prototype)
-  }
-  if (!('sheet' in SVGStyleElement.prototype)) {
-    Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
-      get: function () {
-        var all = document.styleSheets,
-          i = 0,
-          sheet
-        while ((sheet = all[i++])) {
-          if (sheet.ownerNode === this) return sheet
-        }
-      },
-    })
-  }
-
-  // main logic
-
-  // cached regexps, better performance
-  const regFindSetters = /([\s{;])(--([A-Za-z0-9-_]*)\s*:([^;!}{]+)(!important)?)(?=\s*([;}]|$))/g
-  const regFindGetters = /([{;]\s*)([A-Za-z0-9-_]+\s*:[^;}{]*var\([^!;}{]+)(!important)?(?=\s*([;}$]|$))/g
-  const regRuleIEGetters = /-ieVar-([^:]+):/g
-  const regRuleIESetters = /-ie-([^};]+)/g
-  //const regHasVar = /var\(/;
-  const regPseudos = /:(hover|active|focus|target|visited|link|:before|:after|:first-letter|:first-line)/
-
-  onElement('link[rel="stylesheet"]', function (el) {
-    fetchCss(el.href, function (css) {
-      var newCss = rewriteCss(css)
-      if (css === newCss) return
-      newCss = relToAbs(el.href, newCss)
-      el.disabled = true
-      var style = document.createElement('style')
-      if (el.media) style.setAttribute('media', el.media)
-      el.parentNode.insertBefore(style, el)
-      activateStyleElement(style, newCss)
-    })
-  })
-
-  function foundStyle(el) {
-    if (el.ieCP_polyfilled) return
-    if (el.ieCP_elementSheet) return
-    var css = el.innerHTML
-    var newCss = rewriteCss(css)
-    if (css === newCss) return
-    activateStyleElement(el, newCss)
-  }
-  onElement('style', foundStyle)
-  // immediate, to pass w3c-tests, bud its a bad idea
-  // addEventListener('DOMNodeInserted',function(e){ e.target.tagName === 'STYLE' && foundStyle(e.target); });
-
-  onElement('[ie-style]', function (el) {
-    var newCss = rewriteCss('{' + el.getAttribute('ie-style')).substr(1)
-    el.style.cssText += ';' + newCss
-    var found = parseRewrittenStyle(el.style)
-    if (found.getters) addGetterElement(el, found.getters, '%styleAttr')
-    if (found.setters) addSetterElement(el, found.setters)
-  })
-
-  function relToAbs(base, css) {
-    return css.replace(/url\(([^)]+)\)/g, function ($0, $1) {
-      $1 = $1.trim().replace(/(^['"]|['"]$)/g, '')
-      if ($1.match(/^([a-z]+:|\/)/)) return $0
-      base = base.replace(/\?.*/, '')
-      return 'url(' + base + './../' + $1 + ')'
-    })
-  }
-
-  // ie has a bug, where unknown properties at pseudo-selectors are computed at the element
-  // #el::after { -content:'x'; } => getComputedStyle(el)['-content'] == 'x'
-  // should we add something like -ieVar-pseudo_after-content:'x'?
-  function rewriteCss(css) {
-    /* uncomment if spec finished and needed by someone
-		css = css.replace(/@property ([^{]+){([^}]+)}/, function($0, prop, body){
-			prop = prop.trim();
-			const declaration = {name:prop};
-			body.split(';').forEach(function(pair){
-				const x = pair.split(':');
-				if (x[1]) declaration[ x[0].trim() ] = x[1];
-			});
-			declaration['inherits'] = declaration['inherits'].trim()==='true' ? true : false;
-			declaration['initialValue'] = declaration['initial-value'];
-			CSS.registerProperty(declaration)
-			return '/*\n @property ... removed \n*'+'/';
-		});
-		*/
-    return css
-      .replace(regFindSetters, function ($0, $1, $2, $3, $4, important) {
-        return (
-          $1 + '-ie-' + (important ? '❗' : '') + $3 + ':' + encodeValue($4)
-        )
-      })
-      .replace(regFindGetters, function ($0, $1, $2, important) {
-        return $1 + '-ieVar-' + (important ? '❗' : '') + $2 + '; ' + $2 // keep the original, so chaining works "--x:var(--y)"
-      })
-  }
-  function encodeValue(value) {
-    return value
-    return value.replace(/ /g, '␣')
-  }
-  const keywords = { initial: 1, inherit: 1, revert: 1, unset: 1 }
-  function decodeValue(value) {
-    return value
-    if (value === undefined) return
-    value = value.replace(/␣/g, ' ')
-    const trimmed = value.trim()
-    if (keywords[trimmed]) return trimmed
-    return value
-  }
-
-  // beta
-  const styles_of_getter_properties = {}
-
-  function parseRewrittenStyle(style) {
-    // less memory then parameter cssText?
-
-    // beta
-    style['z-index'] // ie11 can access unknown properties in stylesheets only if accessed a dashed known property
-
-    const cssText = style.cssText
-    var matchesGetters = cssText.match(regRuleIEGetters),
-      j,
-      match
-    if (matchesGetters) {
-      var getters = [] // eg. [border,color]
-      for (j = 0; (match = matchesGetters[j++]); ) {
-        let propName = match.slice(7, -1)
-        if (propName[0] === '❗') propName = propName.substr(1)
-        getters.push(propName)
-
-        // beta
-        if (!styles_of_getter_properties[propName])
-          styles_of_getter_properties[propName] = []
-        styles_of_getter_properties[propName].push(style)
-      }
-    }
-    var matchesSetters = cssText.match(regRuleIESetters)
-    if (matchesSetters) {
-      var setters = {} // eg. [--color:#fff, --padding:10px];
-      for (j = 0; (match = matchesSetters[j++]); ) {
-        let x = match.substr(4).split(':')
-        let propName = x[0]
-        let propValue = x[1]
-        if (propName[0] === '❗') propName = propName.substr(1)
-        setters[propName] = propValue
-      }
-    }
-    return { getters: getters, setters: setters }
-  }
-  function activateStyleElement(style, css) {
-    style.innerHTML = css
-    style.ieCP_polyfilled = true
-    var rules = style.sheet.rules,
-      i = 0,
-      rule // cssRules = CSSRuleList, rules = MSCSSRuleList
-    while ((rule = rules[i++])) {
-      const found = parseRewrittenStyle(rule.style)
-      if (found.getters) addGettersSelector(rule.selectorText, found.getters)
-      if (found.setters) addSettersSelector(rule.selectorText, found.setters)
-
-      // mediaQueries: redraw the hole document
-      // better add events for each element?
-      const media =
-        rule.parentRule &&
-        rule.parentRule.media &&
-        rule.parentRule.media.mediaText
-      if (media && (found.getters || found.setters)) {
-        matchMedia(media).addListener(function () {
-          drawTree(document.documentElement)
-        })
-      }
-    }
-
-    // beta
-    redrawStyleSheets()
-  }
-
-  function addGettersSelector(selector, properties) {
-    selectorAddPseudoListeners(selector)
-    onElement(unPseudo(selector), function (el) {
-      addGetterElement(el, properties, selector)
-      drawElement(el)
-    })
-  }
-  function addGetterElement(el, properties, selector) {
-    var i = 0,
-      prop,
-      j
-    const selectors = selector.split(',') // split grouped selectors
-    el.setAttribute('iecp-needed', true)
-    if (!el.ieCPSelectors) el.ieCPSelectors = {}
-    while ((prop = properties[i++])) {
-      for (j = 0; (selector = selectors[j++]); ) {
-        const parts = selector.trim().split('::')
-        if (!el.ieCPSelectors[prop]) el.ieCPSelectors[prop] = []
-        el.ieCPSelectors[prop].push({
-          selector: parts[0],
-          pseudo: parts[1] ? '::' + parts[1] : '',
-        })
-      }
-    }
-  }
-  function addSettersSelector(selector, propVals) {
-    selectorAddPseudoListeners(selector)
-    onElement(unPseudo(selector), function (el) {
-      addSetterElement(el, propVals)
-    })
-  }
-  function addSetterElement(el, propVals) {
-    if (!el.ieCP_setters) el.ieCP_setters = {}
-    for (var prop in propVals) {
-      // eg. {foo:#fff, bar:baz}
-      el.ieCP_setters['--' + prop] = 1
-    }
-    drawTree(el)
-  }
-
-  //beta
-  function redrawStyleSheets() {
-    for (var prop in styles_of_getter_properties) {
-      let styles = styles_of_getter_properties[prop]
-      for (var i = 0, style; (style = styles[i++]); ) {
-        if (style.owningElement) continue
-        var value = style['-ieVar-' + prop]
-        if (!value) continue
-        value = styleComputeValueWidthVars(
-          getComputedStyle(document.documentElement),
-          value
-        )
-        if (value === '') continue
-        try {
-          style[prop] = value
-        } catch (e) {}
-      }
-    }
-  }
-
-  const pseudos = {
-    hover: {
-      on: 'mouseenter',
-      off: 'mouseleave',
-    },
-    focus: {
-      on: 'focusin',
-      off: 'focusout',
-    },
-    active: {
-      on: 'CSSActivate',
-      off: 'CSSDeactivate',
-    },
-  }
-  function selectorAddPseudoListeners(selector) {
-    // ie11 has the strange behavoir, that groups of selectors are individual rules, but starting with the full selector:
-    // td, th, button { color:red } results in this rules:
-    // "td, th, button" | "th, th" | "th"
-    selector = selector.split(',')[0]
-    for (var pseudo in pseudos) {
-      var parts = selector.split(':' + pseudo)
-      if (parts.length > 1) {
-        var ending = parts[1].match(/^[^\s]*/) // ending elementpart of selector (used for not(:active))
-        let sel = unPseudo(parts[0] + ending)
-        const listeners = pseudos[pseudo]
-        onElement(sel, function (el) {
-          el.addEventListener(listeners.on, drawTreeEvent)
-          el.addEventListener(listeners.off, drawTreeEvent)
-        })
-      }
-    }
-  }
-  let CSSActive = null
-  document.addEventListener('mousedown', function (e) {
-    setTimeout(function () {
-      if (e.target === document.activeElement) {
-        var evt = document.createEvent('Event')
-        evt.initEvent('CSSActivate', true, true)
-        CSSActive = e.target
-        CSSActive.dispatchEvent(evt)
-      }
-    })
-  })
-  document.addEventListener('mouseup', function () {
-    if (CSSActive) {
-      var evt = document.createEvent('Event')
-      evt.initEvent('CSSDeactivate', true, true)
-      CSSActive.dispatchEvent(evt)
-      CSSActive = null
-    }
-  })
-
-  function unPseudo(selector) {
-    return selector.replace(regPseudos, '').replace(':not()', '')
-  }
-
-  var uniqueCounter = 0
-
-  /* old *
-	function _drawElement(el) {
-		if (!el.ieCP_unique) { // use el.uniqueNumber? but needs class for the css-selector => test performance
-			el.ieCP_unique = ++uniqueCounter;
-			el.classList.add('iecp-u' + el.ieCP_unique);
-		}
-		var style = getComputedStyle(el);
-		if (el.ieCP_sheet) while (el.ieCP_sheet.rules[0]) el.ieCP_sheet.deleteRule(0);
-		for (var prop in el.ieCPSelectors) {
-			var important = style['-ieVar-❗' + prop];
-			let valueWithVar = important || style['-ieVar-' + prop];
-			if (!valueWithVar) continue; // todo, what if '0'
-
-			var details = {};
-			var value = styleComputeValueWidthVars(style, valueWithVar, details);
-
-			if (important) value += ' !important';
-			for (var i=0, item; item=el.ieCPSelectors[prop][i++];) { // todo: split and use requestAnimationFrame?
-				if (item.selector === '%styleAttr') {
-					el.style[prop] = value;
-				} else {
-
-					// beta
-					if (!important && details.allByRoot !== false) continue; // dont have to draw root-properties
-
-					//let selector = item.selector.replace(/>? \.[^ ]+/, ' ', item.selector); // todo: try to equalize specificity
-					let selector = item.selector;
-					elementStyleSheet(el).insertRule(selector + '.iecp-u' + el.ieCP_unique + item.pseudo + ' {' + prop + ':' + value + '}', 0);
-				}
-			}
-		}
-	}
-	function elementStyleSheet(el){
-		if (!el.ieCP_sheet) {
-			const styleEl = document.createElement('style');
-			styleEl.ieCP_elementSheet = 1;
-			//el.appendChild(styleEl); // yes! self-closing tags can have style as children, but - if i set innerHTML, the stylesheet is lost
-			document.head.appendChild(styleEl);
-			el.ieCP_sheet = styleEl.sheet;
-		}
-		return el.ieCP_sheet;
-	}
-
-	/* */
-  function _drawElement(el) {
-    if (!el.ieCP_unique) {
-      // use el.uniqueNumber? but needs class for the css-selector => test performance
-      el.ieCP_unique = ++uniqueCounter
-      el.classList.add('iecp-u' + el.ieCP_unique)
-    }
-    var style = getComputedStyle(el)
-    let css = ''
-    for (var prop in el.ieCPSelectors) {
-      var important = style['-ieVar-❗' + prop]
-      let valueWithVar = important || style['-ieVar-' + prop]
-      if (!valueWithVar) continue // todo, what if '0'
-      var details = {}
-      var value = styleComputeValueWidthVars(style, valueWithVar, details)
-      //if (value==='initial') value = initials[prop];
-      if (important) value += ' !important'
-      for (var i = 0, item; (item = el.ieCPSelectors[prop][i++]); ) {
-        // todo: split and use requestAnimationFrame?
-        if (item.selector === '%styleAttr') {
-          el.style[prop] = value
-        } else {
-          // beta
-          if (!important && details.allByRoot !== false) continue // dont have to draw root-properties
-
-          //let selector = item.selector.replace(/>? \.[^ ]+/, ' ', item.selector); // todo: try to equalize specificity
-          let selector = item.selector
-          css +=
-            selector +
-            '.iecp-u' +
-            el.ieCP_unique +
-            item.pseudo +
-            '{' +
-            prop +
-            ':' +
-            value +
-            '}\n'
-          // el.runtimeStyle[prop] = value; // todo
-        }
-      }
-    }
-    elementSetCss(el, css)
-  }
-  function elementSetCss(el, css) {
-    if (!el.ieCP_styleEl && css) {
-      const styleEl = document.createElement('style')
-      styleEl.ieCP_elementSheet = 1
-      //el.appendChild(styleEl); // yes! self-closing tags can have style as children, but - if i set innerHTML, the stylesheet is lost
-      document.head.appendChild(styleEl)
-      el.ieCP_styleEl = styleEl
-    }
-    if (el.ieCP_styleEl) el.ieCP_styleEl.innerHTML = css
-  }
-  /* */
-
-  function drawTree(target) {
-    if (!target) return
-    var els = target.querySelectorAll('[iecp-needed]')
-    if (target.hasAttribute && target.hasAttribute('iecp-needed'))
-      drawElement(target) // self
-    for (var i = 0, el; (el = els[i++]); ) drawElement(el) // tree
-  }
-  // draw queue
-  let drawQueue = new Set()
-  let collecting = false
-  let drawing = false
-  function drawElement(el) {
-    drawQueue.add(el)
-    if (collecting) return
-    collecting = true
-    requestAnimationFrame(function () {
-      //setImmediate(function(){
-      collecting = false
-      drawing = true
-      drawQueue.forEach(_drawElement)
-      drawQueue.clear()
-      setTimeout(function () {
-        // mutationObserver will trigger delayed, requestAnimationFrame will miss some changes
-        drawing = false
-      })
-    })
-  }
-
-  function drawTreeEvent(e) {
-    drawTree(e.target)
-  }
-
-  function findVars(str, cb) {
-    // css value parser
-    let level = 0,
-      openedLevel = null,
-      lastPoint = 0,
-      newStr = '',
-      i = 0,
-      char,
-      insideCalc
-    while ((char = str[i++])) {
-      if (char === '(') {
-        ++level
-        if (
-          openedLevel === null &&
-          str[i - 4] + str[i - 3] + str[i - 2] === 'var'
-        ) {
-          openedLevel = level
-          newStr += str.substring(lastPoint, i - 4)
-          lastPoint = i
-        }
-        if (str[i - 5] + str[i - 4] + str[i - 3] + str[i - 2] === 'calc') {
-          insideCalc = level
-        }
-      }
-      if (char === ')' && openedLevel === level) {
-        let variable = str.substring(lastPoint, i - 1).trim(),
-          fallback
-        let x = variable.indexOf(',')
-        if (x !== -1) {
-          fallback = variable.slice(x + 1)
-          variable = variable.slice(0, x)
-        }
-        newStr += cb(variable, fallback, insideCalc)
-        lastPoint = i
-        openedLevel = null
-      }
-      if (char === ')') {
-        --level
-        if (insideCalc === level) insideCalc = null
-      }
-    }
-    newStr += str.substring(lastPoint)
-    return newStr
-  }
-  function styleComputeValueWidthVars(style, valueWithVars, details) {
-    return findVars(valueWithVars, function (variable, fallback, insideCalc) {
-      var value = style.getPropertyValue(variable)
-      if (insideCalc) value = value.replace(/^calc\(/, '(') // prevent nested calc
-      if (details && style.lastPropertyServedBy !== document.documentElement)
-        details.allByRoot = false
-      if (value === '' && fallback)
-        value = styleComputeValueWidthVars(style, fallback, details)
-      return value
-    })
-  }
-
-  // mutation listener
-  var observer = new MutationObserver(function (mutations) {
-    if (drawing) return
-    for (var i = 0, mutation; (mutation = mutations[i++]); ) {
-      if (mutation.attributeName === 'iecp-needed') continue // why?
-      // recheck all selectors if it targets new elements?
-      drawTree(mutation.target)
-    }
-  })
-  setTimeout(function () {
-    observer.observe(document, { attributes: true, subtree: true })
-  })
-
-  // :target listener
-  var oldHash = location.hash
-  addEventListener('hashchange', function (e) {
-    var newEl = document.getElementById(location.hash.substr(1))
-    if (newEl) {
-      var oldEl = document.getElementById(oldHash.substr(1))
-      drawTree(newEl)
-      drawTree(oldEl)
-    } else {
-      drawTree(document)
-    }
-    oldHash = location.hash
-  })
-
-  // add owningElement to Element.style
-  var descriptor = Object.getOwnPropertyDescriptor(
-    HTMLElement.prototype,
-    'style'
-  )
-  var styleGetter = descriptor.get
-  descriptor.get = function () {
-    const style = styleGetter.call(this)
-    style.owningElement = this
-    return style
-  }
-  Object.defineProperty(HTMLElement.prototype, 'style', descriptor)
-
-  // add computedFor to computed style-objects
-  var originalGetComputed = getComputedStyle
-  window.getComputedStyle = function (el) {
-    var style = originalGetComputed.apply(this, arguments)
-    style.computedFor = el
-    //style.pseudoElt = pseudoElt; //not needed at the moment
-    return style
-  }
-
-  // getPropertyValue / setProperty hooks
-  const StyleProto = CSSStyleDeclaration.prototype
-
-  const oldGetP = StyleProto.getPropertyValue
-  StyleProto.getPropertyValue = function (property) {
-    this.lastPropertyServedBy = false
-    property = property.trim()
-
-    /* *
-		if (this.owningElement) {
-			const ieProperty = '-ieVar-'+property;
-			const iePropertyImportant = '-ieVar-❗'+property;
-			let value = this[iePropertyImportant] || this[ieProperty];
-			if (value !== undefined) {
-				// todo, test if syntax valid
-				return value;
-			}
-		}
-		/* */
-
-    if (property[0] !== '-' || property[1] !== '-')
-      return oldGetP.apply(this, arguments)
-    const undashed = property.substr(2)
-    const ieProperty = '-ie-' + undashed
-    const iePropertyImportant = '-ie-❗' + undashed
-    let value = decodeValue(this[iePropertyImportant] || this[ieProperty])
-
-    if (this.computedFor) {
-      // computedStyle
-      if (value !== undefined && !inheritingKeywords[value]) {
-        //if (regHasVar.test(value))  // todo: to i need this check?!!! i think its faster without
-        value = styleComputeValueWidthVars(this, value)
-        this.lastPropertyServedBy = this.computedFor
-      } else {
-        // inherited
-        if (
-          inheritingKeywords[value] ||
-          !register[property] ||
-          register[property].inherits
-        ) {
-          //let el = this.pseudoElt ? this.computedFor : this.computedFor.parentNode;
-          let el = this.computedFor.parentNode
-          while (el.nodeType === 1) {
-            // how slower would it be to getComputedStyle for every element, not just with defined ieCP_setters
-            if (el.ieCP_setters && el.ieCP_setters[property]) {
-              // i could make
-              // value = el.nodeType ? getComputedStyle(this.computedFor.parentNode).getPropertyValue(property)
-              // but i fear performance, stupid?
-              var style = getComputedStyle(el)
-              var tmpVal = decodeValue(
-                style[iePropertyImportant] || style[ieProperty]
-              )
-              if (tmpVal !== undefined) {
-                // calculated style from current element not from the element the value was inherited from! (style, value)
-                //value = tmpVal; if (regHasVar.test(tmpVal))  // todo: to i need this check?!!! i think its faster without
-                value = styleComputeValueWidthVars(this, tmpVal)
-                this.lastPropertyServedBy = el
-                break
-              }
-            }
-            el = el.parentNode
-          }
-        }
-      }
-      if (value === 'initial') return ''
-    }
-    //if ((value === undefined || value === 'initial') && register[property]) value = register[property].initialValue; // todo?
-    if (value === undefined && register[property])
-      value = register[property].initialValue
-    if (value === undefined) return ''
-    return value
-  }
-  const inheritingKeywords = { inherit: 1, revert: 1, unset: 1 }
-
-  const oldSetP = StyleProto.setProperty
-  StyleProto.setProperty = function (property, value, prio) {
-    if (property[0] !== '-' || property[1] !== '-')
-      return oldSetP.apply(this, arguments)
-    const el = this.owningElement
-    if (el) {
-      if (!el.ieCP_setters) el.ieCP_setters = {}
-      el.ieCP_setters[property] = 1
-    }
-    property = '-ie-' + (prio === 'important' ? '❗' : '') + property.substr(2)
-    this.cssText += '; ' + property + ':' + encodeValue(value) + ';'
-    //this[property] = value;
-    el === document.documentElement && redrawStyleSheets()
-    el && drawTree(el) // its delayed internal
-  }
-
-  /*
-	var descriptor = Object.getOwnPropertyDescriptor(StyleProto, 'cssText');
-	var cssTextGetter = descriptor.get;
-	var cssTextSetter = descriptor.set;
-	// descriptor.get = function () {
-	// 	const style = styleGetter.call(this);
-	// 	style.owningElement = this;
-	// 	return style;
-	// }
-	descriptor.set = function (css) {
-		var el = this.owningElement;
-		if (el) {
-			css = rewriteCss('{'+css).substr(1);
-			cssTextSetter.call(this, css);
-			var found = parseRewrittenStyle(this);
-			if (found.getters) addGetterElement(el, found.getters, '%styleAttr');
-			if (found.setters) addSetterElement(el, found.setters);
-			return;
-		}
-		return cssTextSetter.call(this, css);
-	}
-	Object.defineProperty(StyleProto, 'cssText', descriptor);
-	*/
-
-  if (!window.CSS) window.CSS = {}
-  const register = {}
-  CSS.registerProperty = function (options) {
-    register[options.name] = options
-  }
-
-  // fix "initial" keyword with generated custom properties, this is not supported ad all by ie, should i make a separate "inherit"-polyfill?
-  /*
-	const computed = getComputedStyle(document.documentElement)
-	const initials = {};
-	for (let i in computed) {
-		initials[i.replace(/([A-Z])/, function(x){ return '-'+x.toLowerCase(x) })] = computed[i];
-	}
-	initials['display'] = 'inline';
-	*/
-
-  // utils
-  function fetchCss(url, callback) {
-    var request = new XMLHttpRequest()
-    request.open('GET', url)
-    request.overrideMimeType('text/css')
-    request.onload = function () {
-      if (request.status >= 200 && request.status < 400) {
-        callback(request.responseText)
-      }
-    }
-    request.send()
-  }
-})()
diff --git a/website/public/ie-warning.js b/website/public/ie-warning.js
new file mode 100644
index 000000000..048cc224b
--- /dev/null
+++ b/website/public/ie-warning.js
@@ -0,0 +1,31 @@
+!(function () {
+  'use strict'
+
+  const el = document.createElement('div');
+  el.innerHTML =
+    '<div class="ie-warning">' +
+    '  <p class="ie-warning-description">' +
+    '    Internet Explorer is no longer supported.' +
+    '    <a href="https://support.hashicorp.com/hc/en-us/articles/4416485547795">' +
+    '      Learn more.' +
+    '    </a>' +
+    '  </p>' +
+    '</div>' +
+    '<style>' +
+    '  .ie-warning {' +
+    '    background-color: #FCF0F2;' +
+    '    border-bottom: 1px solid #FFD4D6;' +
+    '    color: #BA2226;' +
+    '    text-align: center;' +
+    '    font-family: "Segoe UI", sans-serif;' +
+    '    font-weight: bold;' +
+    '  }' +
+    '  .ie-warning-description {' +
+    '    padding: 16px 0;' +
+    '    margin: 0;' +
+    '    color: #BA2226;' +
+    '  }' +
+    '</style>';
+
+  document.body.insertBefore(el, document.body.childNodes[0]);
+})();