rpm-mcarman b9f7ec4306 First Commit		3 vuotta sitten
..
dist	First Commit	3 vuotta sitten
lib	First Commit	3 vuotta sitten
node_modules/warning	First Commit	3 vuotta sitten
src	First Commit	3 vuotta sitten
LICENSE	First Commit	3 vuotta sitten
changelog.md	First Commit	3 vuotta sitten
license.md	First Commit	3 vuotta sitten
package.json	First Commit	3 vuotta sitten
readme.md	First Commit	3 vuotta sitten

readme.md

JSS

JSS is a more powerful abstraction over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic. It is about 6KB (minified and gzipped) and is extensible via plugins API.

Feel free to ask any JSS related questions on twitter by using hashtag #cssinjs and mentioning @oleg008, watch my latest talk about “Unique Value Proposition of CSSinJS” and try it on a playground.

If you are a Sass (SCSS) user, this course will show how to express popular Sass language features using latest JavaScript features: Convert SCSS (Sass) to CSS-in-JS.

Key features

Integrations

React-JSS - HOC interface for React with theming, try it on playground.
Styled-JSS - styled components interface for React, try it on playground.
Aphrodite-JSS - aphrodite like API.

Example

Try it out on playground. You need to setup plugins before. You can use a preset for a quick setup with default plugins.

import jss from 'jss'
import preset from 'jss-preset-default'
import color from 'color'

// One time setup with default plugins and settings.
jss.setup(preset())

const styles = {
  button: {
    fontSize: 12,
    '&:hover': {
      background: 'blue'
    }
  },
  ctaButton: {
    extend: 'button',
    '&:hover': {
      background: color('blue')
        .darken(0.3)
        .hex()
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
  <button class="${classes.button}">Button</button>
  <button class="${classes.ctaButton}">CTA Button</button>
`

Result

<head>
  <style>
    .button-123456 {
      font-size: 12px;
    }
    .button-123456:hover {
      background: blue;
    }
    .ctaButton-789012 {
      font-size: 12px;
    }
    .ctaButton-789012:hover {
      background: red;
    }
    @media (min-width: 1024px) {
      .button-123456 {
        min-width: 200px;
      }
    }
  </style>
</head>
<body>
  <button class="button-123456">Button</button>
  <button class="ctaButton-789012">CTA Button</button>
</body>

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 collision 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.
You just want to use any of its benefits

Roadmap

We don’t have a strict roadmap, we work on issues depending on personal priorities. If you are looking to help - important issues is what we should focus on.

Browsers Support

We have automated tests running in real browsers.

License

MIT

Thanks

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

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]