jss 0,0,1,5,0,5 eslint travis-ci karma npm webpack

JSS is a CSS authoring tool which uses JavaScript as a host language.

JSS

Gitter Build Status codecov bitHound Score OpenCollective OpenCollective

JSS is a better 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. You can use it with React or with any other library. It is about 5KB (minified and gzipped) and is extensible via plugins API.

Integrations

Official

External

  • Theme Reactor - experimental React integration with theming.
  • Aesthetic - a React style abstraction layer with theme support.

TOC

  1. Live examples.
  2. Benefits
  3. Setup
  4. JSON API (JSS Syntax)
  5. JavaScript API
  6. Server-side rendering
  7. Performance
  8. Plugins API
  9. Official plugins
  10. All related projects
  11. CLI Converter
  12. Contributing

Example

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 type="text/css">
    .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

  • Make it easier for newcomers to setup jss with plugins (like presets).
  • Make JSON DSL even better, for e.g. jss-expand.
  • Make it easy to see when changes in the core break plugins (integrate plugins test suite).
  • Make community create plugins (better plugins API documentation, infrastructure).
  • Do more benchmarking, include plugins, always track perf regressions.
  • Introduce a way for theming with react-jss or replace it by jss-theme-reactor
  • Make SSR even better (vendor prefixer, smaller critical CSS)
  • Make CLI tool better, allow integration of styles written in various preprocessing languages as well as pure css.
  • React Native support.
  • Add converters stylus, sass and co. to cli with constants reuse.

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]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Related Repositories

jss

jss

JSS is a CSS authoring tool which uses JavaScript as a host language. ...

react-jss

react-jss

Integration of JSS for react. ...

jss

jss

JavaScript library for getting and setting CSS stylesheet rules ...

styled-jss

styled-jss

Styled Components on top of JSS. ...

aphrodite-jss

aphrodite-jss

Aphrodite-like API on top of JSS. ...


Top Contributors

kof nathanmarks joshgillies watilde wldcordeiro okonet mindjuice urbantumbleweed wizardzloy greenkeeperio-bot mpal9000 allain gcallaghan alexkuz markdalgleish nkbt nikgraf qimingweng 0xR gitter-badger TimothyKrell b2whats npmcdn-to-unpkg-bot

Dependencies

package version
is-in-browser ^1.0.2
warning ^3.0.0
dev babel-cli ^6.18.0
babel-core ^6.20.0
babel-eslint ^7.1.1
babel-loader ^6.2.9
babel-plugin-inline-version ^1.0.2
babel-plugin-rewire ^1.0.0
babel-plugin-transform-es3-member-expression-literals ^6.8.0
babel-plugin-transform-es3-property-literals ^6.8.0
babel-plugin-transform-flow-strip-types ^6.18.0
babel-plugin-transform-inline-environment-variables ^6.8.0
babel-plugin-transform-runtime ^6.23.0
babel-preset-es2015 ^6.18.0
babel-preset-stage-0 ^6.16.0
codecov ^1.0.1
common-tags ^1.4.0
cross-env ^3.1.3
detect-browser ^1.5.0
es5-shim ^4.5.9
eslint ^3.11.1
eslint-config-airbnb ^13.0.0
eslint-config-jss ^3.0.0
eslint-plugin-flowtype ^2.29.1
eslint-plugin-import ^2.2.0
eslint-plugin-jsx-a11y ^2.2.3
eslint-plugin-react ^6.5.0
expect.js ^0.3.1
flow-bin ^0.47.0
flow-copy-source ^1.1.0
json-loader ^0.5.4
jss-cache ^2.0.0
jss-camel-case ^5.0.0
jss-compose ^4.0.0
jss-default-unit ^7.0.0
jss-expand ^4.0.0
jss-extend ^5.0.0
jss-global ^2.0.0
jss-isolate ^4.0.0
jss-nested ^5.0.0
jss-props-sort ^5.0.0
jss-vendor-prefixer ^6.0.0
karma ^1.3.0
karma-benchmark ^0.6.0
karma-benchmark-reporter ^0.1.1
karma-browserstack-launcher ^1.1.1
karma-chrome-launcher ^2.0.0
karma-coverage ^1.1.1
karma-mocha ^1.3.0
karma-mocha-reporter ^2.2.1
karma-sourcemap-loader ^0.3.7
karma-webpack ^1.8.0
lint-staged ^3.2.2
mocha ^3.2.0
pre-commit ^1.1.3
rimraf ^2.5.4
size-limit ^0.2.0
webpack ^2.3.3

Releases

-   5.5.5 zip tar
-   5.5.4 zip tar
-   5.5.3 zip tar
-   5.5.2 zip tar
-   5.5.1 zip tar
-   5.5.0 zip tar
-   5.4.0 zip tar
-   5.3.0 zip tar
-   5.2.0 zip tar
-   5.1.0 zip tar
-   5.0.0 zip tar
-   4.0.3 zip tar
-   4.0.2 zip tar
-   4.0.1 zip tar
-   4.0.0 zip tar
-   3.11.1 zip tar
-   3.11.0 zip tar
-   3.10.0 zip tar
-   3.9.1 zip tar
-   3.9.0 zip tar
-   3.8.0 zip tar
-   3.7.0 zip tar
-   3.6.3 zip tar
-   3.6.2 zip tar
-   3.6.1 zip tar
-   3.6.0 zip tar
-   3.5.0 zip tar
-   3.4.0 zip tar
-   3.3.0 zip tar
-   3.2.0 zip tar