example.md

Theo lets you preprocess your JSON data before sending it through to its normal processes. This preprocess allows you to use a nested props structure, which is then converted to standard flat props.

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
    HOVER:
      BACKGROUND:
        value: blue
      COLOR:
        value: gray

is the same as this

props:
  BUTTON_BACKGROUND:
    value: blue
  BUTTON_COLOR:
    value: white 
  BUTTON_HOVER_BACKGROUND:
    value: blue
  BUTTON_HOVER_COLOR:
    value: gray

nested_props_theo_transform.js

    .pipe(theo.plugins.transform('web', {
      includeRawValue: true,
      jsonPreProcess: json => {
        let resolveNestedProps = (props, parent = "") => {
          let flatProps = {};
          _.forEach(props, (value, key) => {
            if (typeof value == 'object') {
              let propName = (parent === "" ? "" : parent + "_") + key
              flatProps = Object.assign(flatProps, resolveNestedProps(value, propName))
              if (value.value) {
                flatProps[propName] = value
              }
            }
          })
          return flatProps;
        }
        json.props = resolveNestedProps(json.props);
        return json;
      }
    }))