aaronbarker / css-variables-polyfill

A basic polyfill for CSS Variables/custom-properties

CSS Variables Polyfill

A basic polyfill for CSS Variables/custom-properties

This is an attempt at a very basic CSS variables (custom properties) polyfil. In reality this is more of a partial polyfill as it will not cover variables inside of variables, DOM scoping or anything else "fancy". Just taking variables declared anywhere in the CSS and then re-parsing the CSS for var() statements and replacing them in browsers that don't natively support CSS variables.

According to caniuse.com, of current browsers only IE, Edge and Opera Mini do not support CSS variables. This polyfill appears to work on all three really well. I don't see why this wouldn't work on older browsers as well, but I haven't been able to test it on them yet.

Changelog

1.2 - 2021-03-19

• Update findSetters regex and add external test https://regex101.com/r/kWwUmp/3 (some day I will learn to write test cases)
• let to var for better old browser support

1.1.2 - 2019-03-23

• Update findSetters and replaceGetters (thanks @CodeZeno)

1.1.1 - 2018-04-30

• Add support for HTML Imports (thanks @Pilatch)
• Misc IE11 fixes (thanks @proteantech)

1.0.0 - 2018-03-09

• Initial release, pulled in from codepen

Todo

• Verify cross domain working or not (it is working from dropbox)
• Option to wait to apply anything until all s are parsed or inject what we have and update as each returns
• Need to test on a more complex CSS file
• Option to save parsed file in local/session storage so there isn't a delay on additional page loads. Could only do it for links (with URLs to use as keys) and style blocks with IDs of some sort
• Need to test more complex values like rgba(255,0,0,0.5); and something with !important
• Try multiple links
• Local links
• Ajax driven site, or CSS added later the top of the stack

css-variables-polyfill's Issues

findSetters is matching some wrong variables

findSetters regex (--[^:)]+:[\s]*[^;}]+) is set to match multi-line characters, so, the following is being match as a variable name-value pair:

/* ----------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

I've fixed it using this regex instead of the original one: (--[^:)\n\r]+:[\s]*[^;}]+)

Variables with "var(...)" values

Hello,

I faced a problem in a project where one was my variables was assigned as another one (e.g. --var1: var(--var2);). I managed to solve it by modifying replaceGetters like this, so it will keep iterating through the CSS as long as matches are found:

  replaceGetters: function(curCSS, varList) {
    // console.log(varList);
	let replaced = true;
	while (replaced) {
	  replaced = false;
	  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);
		if (curCSS.search(getterRegex, varList[theVar])>=0) {	  
		  curCSS = curCSS.replace(getterRegex, varList[theVar]);
		  replaced = true;
		}

		// now check for any getters that are left that have fallbacks
		let getterRegex2 = new RegExp('var\\([^\\)]+,\\s*([^\\)]+)\\)', 'g');
		// console.log(getterRegex);
		// console.log(curCSS);
		let matches = curCSS.match(getterRegex2);
		while (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]);
			replaced = true;
		  });
		}
		  // curCSS = curCSS.replace(getterRegex2,varList[theVar]);
	  };
	};
    // console.log(curCSS);
    return curCSS;
  },

Multiple Vars referenced in one line don't work

Something like this doesn't work:

:root {
--lh_grey: pink;
--lh_lightgrey: purple; //#f3f3f3
--timezone-button-background: linear-gradient(to bottom, var(--lh_lightgrey) 0%, var(--lh_grey) 50%, var(--lh_lightgrey) 100%); // This doesn't work.
--timezone-button-background: var(--lh_grey); // This does.
}

Make it work for web components imported via link tags

Don't worry, I have a simple fix for this. I just wanted an issue number to reference.

"Let" not supported before IE 11

As said in the title... Didn't even try in IE10 or 9

Add LICENSE

The lack of a license such as MIT discourages use of this polyfill in our company.

Does not support multiple CSS rules per line

css-variables-polyfill/css-var-polyfill.js

Line 66 in c27cb7e

cssVarPoly.varsByBlock[counter] = theCSS.match(/(--.+:.+;)/g) || [];

I suggest changing to something like this:
theCSS.match(/(--[\w-]+:.+);/g)

Otherwise, rules on the same line as the CSS variable are included in the match, and IE 11 throws exceptions. From there, custom variables will not parse.

publish it to npm please

Unable to get property 'classList' of undefined or null reference

I get this error in the console, and it seems like maybe it stops processing, because only some of my variables have been replaced.

@import doesn't work

Found this identified here https://gist.github.com/stramel/91d05253f801f771da38b3bc7d3c765f#gistcomment-2258818

The suggestion of using document.styleSheets will take some work to implement, if it is even practical. Parsing the full document vs parsing individual statements may make change the order of how things run, be less performant (single regex of file vs loop through each declaration), etc. Need to ponder on and investigate more.