jss-css

This is a convenience module for JSS that converts CSS string into JSS object. It allows to describe style classes for components in a habitual and little less verbose way.

Installation

npm i -S jss-css

Examples

import css from 'jss-css/lib/css';
import useSheet from 'react-jss';

@useSheet(css`
  .cell {
    padding: 1rem;
  }

  .separator  ~ .separator {
    border-left: 1px solid #DDD;
  }
`)
class Cell extends Component {
  ...
}

or:

import useSheet from 'jss-css/lib/useSheet';

@useSheet(`
  .cell {
    padding: 1rem;
  }

  .separator  ~ .separator {
    border-left: 1px solid #DDD;
  }
`)
class Cell extends Component {
  ...
}

These css declarations will be converted into JSS object:

{
  'cell': {
    'padding': '1rem'
  },
 
  'separator': {
    '& ~ &': {
      'border-left': '1px solid #DDD'
    }
  }
}

(for the nested styles to work you'll need to use jss-nested plugin)

Also, if you are using Babel, you can use this Babel Plugin to avoid runtime compilation (/* jss-css */ comment is neccessary):

import useSheet from 'jss-css/lib/useSheet';

@useSheet(`
  /* jss-css */
  .cell {
    padding: 1rem;
  }

  .separator  ~ .separator {
    border-left: 1px solid #DDD;
  }
`)
class Cell extends Component {
  ...
}

Note: in this case, you cannot use variables in the template string (at least for now).