SCSS

by joplomacedo

JavaScript

function mergeComposers( base, custom ) {
  if ( !custom ) return base;

  const result = {};
  const allPropKeyPrefixes = new Set([...Object.keys(base), ...Object.keys(custom)]);

  allPropKeyPrefixes.forEach( propKeyPrefix => {
    result[propKeyPrefix] = {
      ...(propKeyPrefix in base ? base[propKeyPrefix] : {}),
      ...(propKeyPrefix in custom ? custom[propKeyPrefix] : {})
    };
  });

  return result;
}


const baseComposers = {
  style: {
    default( {componentName, strippedPropKey, propKey, propVal} ) {
      return `style--${strippedPropKey}-${propVal}`;
    }
  },

  state: {
    default( {componentName, strippedPropKey, propKey, propVal} ) {
      return `state--${strippedPropKey}-${propVal}`;
    },

    icon() {
      return "state--hasIcon";
    }
  }
};

const customComposers = {
  state: {
    icon: 'b',
    loading: 'a'
  }
};


const composers = mergeComposers(baseComposers, customComposers);

console.log(composers);