Network Performance Monitor

    jss-css

    3.0.0 • Public • Published

    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).

    Keywords

    Install

    npm i jss-css

    DownloadsWeekly Downloads

    11

    Version

    3.0.0

    License

    MIT

    Last publish

    Collaborators

    • alexkuz