Make the Style component media query format the same as the inline style format

I wonder if it would make life easier if the regular old inline style format matched the format for the Style component.

For example:

I have several buttons on a page, some I have created in react and some I had to accept the html from a Wordpress plugin:

<a style={styles.buttons} href={this.props.permalink}>Learn More</a>
<div dangerouslySetInnerHTML={{__html: this.props.purchaseLinkHTML}} />
<Style scopeSelector=".button-i-dont-have-direct-access-to" rules={styles.button}/>

const styles = {
  buttons: {
    fontSize: 12,
    '@media (min-width: 768px)': {
      fontSize: 16,
    },
    '@media (min-width: 1200px)': {
      fontSize: 20,
    },
  },
}

Which doesnt work, the media queries need to be in a mediaQueries object for the Style component to work.

I wrote a little helper function which can convert style.buttons to the right format.

const _ = require('lodash');

module.exports = {

  // Can pass unlimited style objects to this function
  convertStylesForStyleComponent: function() {
    var styles = _.merge({}, ...arguments);

    styles.mediaQueries = {}

    const mediaQueryMatcher = '@media ';

    _.forEach(styles, function(value, key) {
      if (key.indexOf(mediaQueryMatcher) === 0) {
        const newKey = key.replace(mediaQueryMatcher, '');
        styles.mediaQueries[newKey] = value;
        delete styles[key];
      }
    });

    return styles;
  }
}

<Style scopeSelector=".button-i-dont-have-direct-access-to" rules={convertStylesForStyleComponent(styles.buttons)}/>

Which will turn the styles to correct format, but it would be nice if it just worked without that step.

May this could be standardized?

FormidableLabs / radium

Make the Style component media query format the same as the inline style format #711