JS should offer object accessors in addition to the string (docs matching) accessor

[argyleink]

currently the js and the json include the CSS property identifier

JS object should be camel case too

[argyleink]

i'm not 100% sure about this. the initial reasoning was so props could be accessed with dot notation, like OP.size1 or maybe OP.size.1. but maybe it's nice that js doesnt need to learn some new api or naming convention, just use what css is doing like OP['--size-1']

[WebMechanic]

I believe OP['--size-1'] is fine for userland code, not sure if you're referring to some internal build / generate step
One could use template strings to i.e. increment numbers in a loop and whatnot. Whatever the scenario the "hyphen bloated" name can be kept in a variable, be built from a set of variables, .split('-') and .match()'ed into segments and manipulated individually etc.
camelCasing would always require to do the extra fn call for the case change and none of the simple string/array manipulations would be possible.