Multiple css properties output on a single color?

[wp-kitten]

Issue description:

I know this has been asked before (https://github.com/aristath/kirki/issues/72) but the current solution is not acceptable, especially if you have more than a few properties to set:

Version used:

latest (3.0.34.1)

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

For example, I have these rules in my css (defaults):

.header {
	border: solid 1px $borderColor;
	-webkit-box-shadow: 0 -1px 0 0 $borderColor inset;
	-moz-box-shadow: 0 -1px 0 0 $borderColor inset;
	box-shadow: 0 -1px 0 0 $borderColor inset;
}

Now, I have added a color control in Customizer that I can use to change the border color, but to apply the change on the above selector (please imagine that's not the only one I have), I would have to do this:

'output' => array(
	array(
		'element'  => '.header',
		'property' => 'border-color',
	),
	array(
		'element'  => '.header',
		'property' => '-webkit-box-shadow',
               // yes, using the "pattern_replace"
	),
	array(
		'element'  => '.header',
		'property' => '-moz-box-shadow',
               // yes, using the "pattern_replace"
	),
	array(
		'element'  => '.header',
		'property' => 'box-shadow',
               // yes, using the "pattern_replace"
	),
       // and so on...

And this code would only get bigger....

The most reasonable solution would be to have "property" as an array as well, so for each entry in the array, apply the value...

@aristath Can you please have a look over this? I don't think it would be difficult to implement this functionality.

Thanks a bunch and keep up the good work!

Regards, Costin

[niklasp]

you can always write your own javascript function when using the 'output' => 'postMessage'-setting as described here: http://aristath.github.io/kirki/docs/modules/postmessage.html #2026

[aristath]

Marking as a feature request. I agree, using an array for the property would simplify things.

However, the particular use-case from above doesn't really need to be like that. Kirki automatically adds vendor-prefixes here: https://github.com/aristath/kirki/blob/v3.0.34/modules/css/class-kirki-modules-css-generator.php#L241-L258 so there will work cross-browser without any extra code from you: 'border-radius', 'box-shadow', 'box-sizing', 'text-shadow', 'transform', 'background-size', 'transition', 'transition-property'

[wp-kitten]

Thank you Aristath, much appreciated. (the above use case was something that crossed my mind at the time I've posted the message)