https://hotcountry925.ca/cdn_v17.5.3a/js/css-var-polyfill.js

1var cssVarPoly = {
2	init: function() {
3		// first lets see if the browser supports CSS variables
4		// 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
5		// Edge supports supports, so check for actual variable support
6		if (window.CSS && window.CSS.supports && window.CSS.supports('(--foo: red)')) {
7			// this browser does support variables, abort
8			console.log('your browser supports CSS variables, aborting and letting the native support handle things.');
9			return;
10		} else {
11			// edge barfs on console statements if the console is not open... lame!
12			console.log('no support for you! polyfill all (some of) the things!!');
13			document.querySelector('body').classList.add('cssvars-polyfilled');
14		}
15
16		cssVarPoly.ratifiedVars = {};
17		cssVarPoly.varsByBlock = {};
18		cssVarPoly.oldCSS = {};
19		
20		// start things off
21		cssVarPoly.findCSS();
22		cssVarPoly.updateCSS();
23	},
24	
25	// find all the css blocks, save off the content, and look for variables
26	findCSS: function() {
27		let styleBlocks = document.querySelectorAll('style[data-cssvar],link[data-cssvar]');
28
29		// we need to track the order of the style/link elements when we save off the CSS, set a counter
30		let counter = 1;
31
32		// loop through all CSS blocks looking for CSS variables being set
33		[].forEach.call(styleBlocks, function(block) {
34			// console.log(block.nodeName);
35			let theCSS;
36			if (block.nodeName === 'STYLE') {
37				// console.log("style");
38				theCSS = block.innerHTML;
39				cssVarPoly.findSetters(theCSS, counter);
40			} else if (block.nodeName === 'LINK') {
41				// console.log("link");
42				cssVarPoly.getLink(block.getAttribute('href'), counter, function(counter, request) {
43					cssVarPoly.findSetters(request.responseText, counter);
44					cssVarPoly.oldCSS[counter] = request.responseText;
45					cssVarPoly.updateCSS();
46				});
47				theCSS = '';
48			}
49			// 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
50			cssVarPoly.oldCSS[counter] = theCSS;
51			counter++;
52		});
53	},
54
55	// find all the "--variable: value" matches in a provided block of CSS and add them to the master list
56	findSetters: function(theCSS, counter) {
57		// console.log(theCSS);
58		cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || [];
59	},
60
61	// run through all the CSS blocks to update the variables and then inject on the page
62	updateCSS: function() {
63		// first lets loop through all the variables to make sure later vars trump earlier vars
64		cssVarPoly.ratifySetters(cssVarPoly.varsByBlock);
65
66		// loop through the css blocks (styles and links)
67		for (let curCSSID in cssVarPoly.oldCSS) {
68			//console.log("curCSS:",cssVarPoly.oldCSS[curCSSID]);
69			let newCSS = cssVarPoly.replaceGetters(cssVarPoly.oldCSS[curCSSID], cssVarPoly.ratifiedVars);
70			//console.log("newCSS:",newCSS);
71			// put it back into the page
72			// first check to see if this block exists already
73			if (document.querySelector('#inserted' + curCSSID)) {
74				// console.log("updating")
75				document.querySelector('#inserted' + curCSSID).innerHTML = newCSS;
76			} else {
77				// console.log("adding");
78				var style = document.createElement('style');
79				style.type = 'text/css';
80				style.innerHTML = newCSS;
81				style.classList.add('inserted');
82				style.id = 'inserted' + curCSSID;
83				document.getElementsByTagName('head')[0].appendChild(style);
84			}
85		};
86	},
87
88	// parse a provided block of CSS looking for a provided list of variables and replace the --var-name with the correct value
89	replaceGetters: function(curCSS, varList) {
90		// console.log(varList);
91		//console.log('beforeAll:', curCSS);
92		for (let theVar in varList) {
93			//console.log(theVar);
94			// match the variable with the actual variable name
95			let getterRegex = new RegExp('var\\(\\s*' + theVar + '\\s*\\)', 'g');
96			// console.log(getterRegex);
97			//console.log('before:', curCSS);
98			curCSS = curCSS.replace(getterRegex, varList[theVar]);
99			//console.log('after:', curCSS);
100		}
101		// now check for any getters that are left that have fallbacks
102		let getterRegex2 = new RegExp('var\\(\\s*.+\\s*,\\s*(.+)\\)', 'g');
103		// console.log(getterRegex);
104		 //console.log(curCSS);
105		let matches = curCSS.match(getterRegex2);
106		if (matches) {
107			// console.log("matches",matches);

108			matches.forEach(function(match) {
109				// console.log(match.match(/var\(.+,\s*(.+)\)/))
110				// find the fallback within the getter
111				curCSS = curCSS.replace(match, match.match(/var\(.+,\s*(.+)\)/)[1]);
112			});
113
114		}
115
116		// curCSS = curCSS.replace(getterRegex2,varList[theVar]);
117		//console.log('afterAll:', curCSS);
118		return curCSS;
119	},
120
121	// determine the css variable name value pair and track the latest
122	ratifySetters: function(varList) {
123		// console.log("varList:",varList);
124		// loop through each block in order, to maintain order specificity
125		for (let curBlock in varList) {
126			let curVars = varList[curBlock];
127			// console.log("curVars:",curVars);
128			// loop through each var in the block
129			curVars.forEach(function(theVar) {
130				// console.log(theVar);
131				// split on the name value pair separator
132				let matches = theVar.split(/:\s*/);
133				// console.log(matches);
134				// 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
135				// 0 = the name, 1 = the value, strip off the ; if it is there
136				cssVarPoly.ratifiedVars[matches[0]] = matches[1].replace(/;/, '');
137			});
138		};
139		// console.log(ratifiedVars);
140	},
141
142	// get the CSS file (same domain for now)
143	getLink: function(url, counter, success) {
144		var request = new XMLHttpRequest();
145		request.open('GET', url, true);
146		request.overrideMimeType('text/css;');
147		request.onload = function() {
148			if (request.status >= 200 && request.status < 400) {
149				// Success!
150				// console.log(request.responseText);
151				if (typeof success === 'function') {
152					success(counter, request);
153				}
154			} else {
155				// We reached our target server, but it returned an error
156				console.warn('an error was returned from:', url);
157			}
158		};
159
160		request.onerror = function() {
161			// There was a connection error of some sort
162			console.warn('we could not get anything from:', url);
163		};
164
165		request.send();
166	}
167};
168
169cssVarPoly.init();