Render React components which require styles on server

I have React.js components that require styles inside:

import './styles.css
import React from 'react';

export default class Basket extends React.Component {
    ...
}

Now I want to make my app isomorphic and prerender it on server..

There's no surprise that Babel starts to complain about css files:

SyntaxError: /Users/dmitri/github/app/src/client/pages/styles.css: Unexpected token (3:5)
  2 |
> 3 | body {
    |      ^
  4 |     background-color: #ddd;
  5 | }
  6 |

How to make it work? There's similar discussion on node-jsx - https://github.com/petehunt/node-jsx/issues/29

Should I add if (browser) statements for this imports?

It's a bit of a different approach, but check out Radium. You can declare your styles as JS objects, so the server won't have to know or care about what css is.

Example from the Radium page:

var React = require('react');
var Radium = require('radium');
var color = require('color');

var Button = React.createClass(Radium.wrap({
  displayName: "Button",

  propTypes: {
    kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired
  },

  render: function () {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (
      <button
        style={[
          styles.base,
          styles[this.props.kind]
        ]}>
        {this.props.children}
      </button>
    );
  }
}));

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    padding: '1.5em 2em',
    border: 0,
    borderRadius: 4,
    color: '#fff',
    cursor: 'pointer',
    fontSize: 16,
    fontWeight: 700,

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    },

    // If you specify more than one, later ones will override earlier ones.
    ':focus': {
      boxShadow: '0 0 0 3px #eee, 0 0 0 6px #0074D9',
      outline: 'none'
    },
  },

  primary: {
    background: '#0074D9'
  },

  warning: {
    background: '#FF4136'
  }
};

Remember, if you're not a fan of inline css, you could always define your styles in a separate JS and import them.

I have exactly the same needs as you. I use webpack for package my app. In webpack, you can define severals variables like this:

var define = new webpack.DefinePlugin({
    "process.env": {
        BROWSER: JSON.stringify(true)
    }
});

In my jsx file:

if (process.env.BROWSER) {
    require('my-css');
}

I think, there are other way to manage css. This is one way to do.