Plugin rewritten from ground up

Version 2.0

assets/kirki/modules/css-vars/script.js

@@ -0,0 +1,61 @@
+/* global kirkiCssVarFields */
+var kirkiCssVars = {
+
+	/**
+	 * Get styles.
+	 *
+	 * @since 3.0.28
+	 * @returns {Object}
+	 */
+	getStyles: function() {
+		var style     = jQuery( '#kirki-css-vars' ),
+			styles    = style.html().replace( ':root{', '' ).replace( '}', '' ).split( ';' ),
+			stylesObj = {};
+
+		// Format styles as a object we can then tweak.
+		_.each( styles, function( style ) {
+			style = style.split( ':' );
+			if ( style[0] && style[1] ) {
+				stylesObj[ style[0] ] = style[1];
+			}
+		} );
+		return stylesObj;
+	},
+
+	/**
+	 * Builds the styles from an object.
+	 *
+	 * @since 3.0.28
+	 * @param {Object} vars - The vars.
+	 * @returns {string}
+	 */
+	buildStyle: function( vars ) {
+		var style = '';
+
+		_.each( vars, function( val, name ) {
+			style += name + ':' + val + ';';
+		} );
+		return ':root{' + style + '}';
+	}
+};
+
+jQuery( document ).ready( function() {
+	_.each( kirkiCssVarFields, function( field ) {
+		wp.customize( field.settings, function( value ) {
+			value.bind( function( newVal ) {
+				var styles = kirkiCssVars.getStyles();
+
+				_.each( field.css_vars, function( cssVar ) {
+					if ( 'object' === typeof newVal ) {
+						if ( cssVar[2] && newVal[ cssVar[2] ] ) {
+							styles[ cssVar[0] ] = cssVar[1].replace( '$', newVal[ cssVar[2] ] );
+						}
+					} else {
+						styles[ cssVar[0] ] = cssVar[1].replace( '$', newVal );
+					}
+				} );
+				jQuery( '#kirki-css-vars' ).html( kirkiCssVars.buildStyle( styles ) )				;
+			} );
+		} );
+	} );
+} );