JSPM

JSS


JSS is a higher level abstraction over CSS. It allows you to describe styles in JSON and leverage the power of JavaScript. It generates style sheets at runtime or server-side and solves a number of CSS issues.

You can use JSS with React, or with any other js library. It is small, modular and extensible via plugins API.

Full documentation

When should I use it?

• You build a JavaScript heavy application.
• You use components based architecture.
• You build a reusable UI library.
• You need a conflict free CSS (external content, third-party UI components ...).
• You need code sharing between js and css.
• Minimal download size is important to you.
• Robustness and code reuse is important to you.
• Ease of maintenance is important to you.

Example.

Online examples.

• style.js

export default {
  headline: {
    fontSize: 20
  },
  title: {
    extend: 'headline',
    position: 'absolute',
    zIndex: 10,
    '&:hover': {
      background: 'red'
    }
  },
  button: {
    width: 100
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

• app.js

import jss from 'jss'
import style from './style.js'

// Creates the style element and inserts it into DOM if DomRenderer is used.
jss.createStyleSheet(style).attach()

Generated style:

<style>
  .headline-jss-0 {
    font-size: 20px;
  }
  .title-jss-1 {
    font-size: 20px;
    position: absolute;
    z-index: 10;
  }
  .title-jss-1:hover {
    background: red;
  }
  .button-jss-2 {
    width: 100px;
  }
  @media (min-width: 1024px): {
    .button-jss-2 {
      width: 200px;
    }
  }
</style>

Install

npm i jss

CLI

For more information see CLI.

npm i jss-cli -g
jss --help

Run tests

npm i
npm test

License

MIT

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to run our build in real browsers and to all awesome contributors.