replaceVariables = (el,value) => {

  // find non-nested css function calls
  // eg: rgb(...), drop-shadow(...)
	let funcReg = /([a-z\-]+)\s*\(\s*([^\(\)]*?)\s*(?:,\s*([^\(\)]*?)\s*)?\s*\)/i;
  let replacements = [];
  let match;
  let uniq = uniqueString(value);

	while( (match = funcReg.exec(value)) !== null ){
    let i = `${replacements.length}`;


    // attempt to resolve variables
    if( match[1].toLowerCase() == 'var' ){
      const varValue = findVariableValue(el, match[2]);
      
      // found variable value
      if( varValue ){
        value = value.replace(match[0],varValue);
        continue;
      }

      // use default value
      // var(--name , default-value)
      if( match[3] ){
        value = value.replace(match[0],match[3]);
        continue;
      }
    }
    
    let placeholder = `${uniq}${i.padStart(5,'-')}`;
    value = value.replace(match[0],placeholder);
    replacements.push({placeholder,replace:match[0]});
  }

  for( var i = replacements.length-1; i >=0; i--){
    const replacement = replacements[i];
		value = value.replace(replacement.placeholder,replacement.replace);
  }
  
  return value;
}
Replace css variables with their value