Mapping generated CSS classes to JavaScript files

[charliermarsh]

With traditional stylesheets, in Chrome I can select an element, look at its styles, and see where they came from (i.e., which file). It'd be great if there were a similar process for RCSS (i.e., a way to figure out which JavaScript file generated a certain RCSS class). I can think of two ways of doing this:

1. The generated CSS class name somehow encapsulates the JavaScript file from which it was generated. For example, if it was generated in tooltip.jsx, then the classname might be c0-tooltip.
2. The generated <style> tag somehow encapsulates the JavaScript file from which it was generated. I'm really not sure if there's a useful way to do this, but it might be attractive if there's some attribute we can add and have the Chrome devtools pick up without additional work.

[chenglou]

Sounds like static analysis (#23) =(
I'll think about some other ways.

(BTW, are you on the new version yet? It's cooler =))

[ianobermiller]

If you create styles using a component mixin (say StyleMixin), you could pull this.constructor.displayName:

var Foo = React.createClass({
  mixins: [StyleMixin(
    root: {
      backgroundColor: 'black',
      color: 'white'
    } 
  )],

  render() {
    return (
      <div className={this.styles.root.className}></div>
    );
  }
});

Edit: this is trickier than I thought; you can only get the component name as early as getInitialState, which is already too late to register styles...

[totty90]

Well, if you put your styles in the same file as the component, then if you know the component you just open that file.