Javascript css变量的Polyfill不'；I don’我没有按预期工作

我试图在Joomla网站上为css颜色变量设置polyfill。我从Aaron Barker那里选择了这个解决方案：

/*！
*css-var-polyfill.js-v1.0.0
*
*版权所有（c）2018 Aaron Barker
*根据麻省理工学院许可证发布
*
*日期：2018-03-09
*/
设cssVarPoly={
init:function（）{
//首先让我们看看浏览器是否支持CSS变量
//IE的任何版本都不支持window.CSS.supports，因此如果一开始不支持window.CSS.supports，我们就知道不支持CSS变量
//边缘支持，因此检查实际的变量支持
if（window.CSS&&window.CSS.supports&&window.CSS.supports（“（-foo:red）”）{
//此浏览器不支持变量、中止
log（'您的浏览器支持CSS变量，中止并让本机支持处理事情'）；
返回；
}否则{
//如果控制台未打开，边缘会在控制台语句上出现条带…跛脚！
log（'不支持您！polyfill所有（部分）东西！！'）；
document.querySelector（'body'）.classList.add（'cssvars-polyfilled'）；
}
cssVarPoly.approviedvars={}；
cssVarPoly.varsByBlock={}；
cssVarPoly.oldCSS={}；
//开始做事
cssVarPoly.findCSS（）；
cssVarPoly.updateCSS（）；
},
//查找所有css块，保存内容，并查找变量
findCSS:function（）{
让styleBlocks=document.querySelectorAll（'style:not（.inserted），link[rel=“stylesheet”]”）；
//当我们保存CSS时，我们需要跟踪样式/链接元素的顺序，设置一个计数器
设计数器=1；
//循环遍历所有CSS块，查找正在设置的CSS变量
[]forEach.call（样式块、函数（块）{
//console.log（block.nodeName）；
让我们一起去吧；
if（block.nodeName==='STYLE'）{
//控制台日志（“样式”）；
theCSS=block.innerHTML；
cssVarPoly.findSetters（密码、计数器）；
}else if（block.nodeName=='LINK'）{
//控制台日志（“链接”）；
cssVarPoly.getLink（block.getAttribute（'href'）、计数器、函数（计数器、请求）{
cssVarPoly.findSetters（request.responseText，计数器）；
cssVarPoly.oldCSS[counter]=request.responseText；
cssVarPoly.updateCSS（）；
});
theCSS=“”；
}
//保存CSS以便稍后再次解析。对于等待ajax返回的链接，该值可能为空，但这将保持顺序
cssVarPoly.oldCSS[计数器]=密码；
计数器++；
});
},
//在提供的CSS块中查找所有“-variable:value”匹配项，并将它们添加到主列表中
findSetters：功能（密码、计数器）{
//控制台日志（theCSS）；
cssVarPoly.varsByBlock[counter]=cs.match（/（-.+：.+）/g）| |[]；
},
//运行所有CSS块以更新变量，然后在页面上注入
updateCSS:function（）{
//首先让我们循环所有变量，以确保后面的变量胜过前面的变量
cssVarPoly.approvalysetters（cssVarPoly.varsByBlock）；
//循环浏览css块（样式和链接）
for（让curCSSID在cssVarPoly.oldCSS中）{
//log（“curCSS:，oldCSS[curCSSID]）；
让newCSS=cssVarPoly.replacegatters（cssVarPoly.oldCSS[curCSSID]，cssVarPoly.approviedvars）；
//把它放回页面
//首先检查此块是否已存在
if（document.querySelector（“#inserted”+curCSSID））{
//控制台日志（“更新”）
document.querySelector（'#inserted'+curCSSID）.innerHTML=newCSS；
}否则{
//控制台日志（“添加”）；
var style=document.createElement（'style'）；
style.type='text/css'；
style.innerHTML=newCSS；
style.classList.add（'inserted'）；
style.id='inserted'+curCSSID；
document.getElementsByTagName（'head'）[0].appendChild（样式）；
}
};
},
//解析提供的CSS块，查找提供的变量列表，并用正确的值替换--var名称
替换对象：函数（curCSS、varList）{
//console.log（varList）；
for（让变量在varList中）{
//console.log（theVar）；
//将变量与实际变量名匹配
让getterRegex=newregexp（'var\\（\\s*'+theVar+'\\s*\\'），'g'）；
//console.log（getterRegex）；
//console.log（curCSS）；
curCSS=curCSS.replace（getterRegex，varList[theVar]）；
//现在检查剩下的任何具有回退的getter
让getterRegex2=newregexp（'var\\（\\s*+\\s*，\\s*（.+）\\），'g'）；
//console.log（getterRegex）；
//console.log（curCSS）；
让matches=curCSS.match（getterRegex2）；
如果（匹配）{
//日志（“匹配”，匹配）；
matches.forEach（函数（匹配）{
//console.log（match.match（/var\（.+，\s*（.+）\）/）
//在getter中查找回退
curCSS=curCSS.replace（match，match.match（/var\（.+，\s*（.+）\）/）[1]）；
});
}
//curCSS=curCSS.replace（getterrege2，varList[theVar]）；
};
//console.log（curCSS）；
返回curCSS；
},
//确定css变量名-值对并跟踪最新的
批准者：函数（varList）{
//log（“varList:，varList”）；
//按顺序循环每个块，以保持顺序的特异性
对于（让路缘锁位于varList中）{
设curVars=varList[curBlock]；
//console.log（“曲线：”，曲线）；
//循环遍历块中的每个变量
forEach曲线（函数（theVar）{
//console.log（theVar）；
//在名称-值对分隔符上拆分
让matches=theVar.split（/：\s*/）；
//console.log（匹配项）；
//将它放在一个基于变量名的对象中。每次我们这样做时，它都会覆盖以前的使用，所以最后一组总是赢家
//0=名称，1=值，去掉；如果有
cssVarPoly
/*!
 * css-var-polyfill.js - v1.0.0
 *
 * Copyright (c) 2018 Aaron Barker <http://aaronbarker.net>
 * Released under the MIT license
 *
 * Date: 2018-03-09
 */
let cssVarPoly = {
  init: function() {
    // first lets see if the browser supports CSS variables
    // No version of IE supports window.CSS.supports, so if that isn't supported in the first place we know CSS variables is not supported
    // Edge supports supports, so check for actual variable support
    if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) {
      // this browser does support variables, abort
      console.log('your browser supports CSS variables, aborting and letting the native support handle things.');
      return;
    } else {
      // edge barfs on console statements if the console is not open... lame!
      console.log('no support for you! polyfill all (some of) the things!!');
      document.querySelector('body').classList.add('cssvars-polyfilled');
    }

    cssVarPoly.ratifiedVars = {};
    cssVarPoly.varsByBlock = {};
    cssVarPoly.oldCSS = {};

    // start things off
    cssVarPoly.findCSS();
    cssVarPoly.updateCSS();
  },

  // find all the css blocks, save off the content, and look for variables
  findCSS: function() {
    let styleBlocks = document.querySelectorAll('style:not(.inserted),link[rel="stylesheet"]');

    // we need to track the order of the style/link elements when we save off the CSS, set a counter
    let counter = 1;

    // loop through all CSS blocks looking for CSS variables being set
    [].forEach.call(styleBlocks, function(block) {
      // console.log(block.nodeName);
      let theCSS;
      if (block.nodeName === 'STYLE') {
        // console.log("style");
        theCSS = block.innerHTML;
        cssVarPoly.findSetters(theCSS, counter);
      } else if (block.nodeName === 'LINK') {
        // console.log("link");
        cssVarPoly.getLink(block.getAttribute('href'), counter, function(counter, request) {
          cssVarPoly.findSetters(request.responseText, counter);
          cssVarPoly.oldCSS[counter] = request.responseText;
          cssVarPoly.updateCSS();
        });
        theCSS = '';
      }
      // save off the CSS to parse through again later. the value may be empty for links that are waiting for their ajax return, but this will maintain the order
      cssVarPoly.oldCSS[counter] = theCSS;
      counter++;
    });
  },

  // find all the "--variable: value" matches in a provided block of CSS and add them to the master list
  findSetters: function(theCSS, counter) {
    // console.log(theCSS);
    cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || [];
  },

  // run through all the CSS blocks to update the variables and then inject on the page
  updateCSS: function() {
    // first lets loop through all the variables to make sure later vars trump earlier vars
    cssVarPoly.ratifySetters(cssVarPoly.varsByBlock);

    // loop through the css blocks (styles and links)
    for (let curCSSID in cssVarPoly.oldCSS) {
      // console.log("curCSS:",oldCSS[curCSSID]);
      let newCSS = cssVarPoly.replaceGetters(cssVarPoly.oldCSS[curCSSID], cssVarPoly.ratifiedVars);
      // put it back into the page
      // first check to see if this block exists already
      if (document.querySelector('#inserted' + curCSSID)) {
        // console.log("updating")
        document.querySelector('#inserted' + curCSSID).innerHTML = newCSS;
      } else {
        // console.log("adding");
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = newCSS;
        style.classList.add('inserted');
        style.id = 'inserted' + curCSSID;
        document.getElementsByTagName('head')[0].appendChild(style);
      }
    };
  },

  // parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value
  replaceGetters: function(curCSS, varList) {
    // console.log(varList);
    for (let theVar in varList) {
      // console.log(theVar);
      // match the variable with the actual variable name
      let getterRegex = new RegExp('var\\(\\s*' + theVar + '\\s*\\)', 'g');
      // console.log(getterRegex);
      // console.log(curCSS);
      curCSS = curCSS.replace(getterRegex, varList[theVar]);

      // now check for any getters that are left that have fallbacks
      let getterRegex2 = new RegExp('var\\(\\s*.+\\s*,\\s*(.+)\\)', 'g');
      // console.log(getterRegex);
      // console.log(curCSS);
      let matches = curCSS.match(getterRegex2);
      if (matches) {
        // console.log("matches",matches);
        matches.forEach(function(match) {
          // console.log(match.match(/var\(.+,\s*(.+)\)/))
          // find the fallback within the getter
          curCSS = curCSS.replace(match, match.match(/var\(.+,\s*(.+)\)/)[1]);
        });

      }

      // curCSS = curCSS.replace(getterRegex2,varList[theVar]);
    };
    // console.log(curCSS);
    return curCSS;
  },

  // determine the css variable name value pair and track the latest
  ratifySetters: function(varList) {
    // console.log("varList:",varList);
    // loop through each block in order, to maintain order specificity
    for (let curBlock in varList) {
      let curVars = varList[curBlock];
      // console.log("curVars:",curVars);
      // loop through each var in the block
      curVars.forEach(function(theVar) {
        // console.log(theVar);
        // split on the name value pair separator
        let matches = theVar.split(/:\s*/);
        // console.log(matches);
        // put it in an object based on the varName. Each time we do this it will override a previous use and so will always have the last set be the winner
        // 0 = the name, 1 = the value, strip off the ; if it is there
        cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, '');
      });
    };
    // console.log(ratifiedVars);
  },

  // get the CSS file (same domain for now)
  getLink: function(url, counter, success) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.overrideMimeType('text/css;');
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        // console.log(request.responseText);
        if (typeof success === 'function') {
          success(counter, request);
        }
      } else {
        // We reached our target server, but it returned an error
        console.warn('an error was returned from:', url);
      }
    };

    request.onerror = function() {
      // There was a connection error of some sort
      console.warn('we could not get anything from:', url);
    };

    request.send();
  }
};

cssVarPoly.init();