JSS is an authoring tool for CSS which uses JavaScript as a host language.
HenriBeck Added linting of markdown code blocks (#898)
* Added linting of markdown code blocks

* - Updated eslint-config-jss
- Updated npm scripts
- Updated docs to work with new eslint rules

* Fix travis

* Fix travis the second

* Remove comments

* Increase travis node version to 8

* Fix npm scripts

* updated snapshots

* Added linting the markdown files on commit

* Fix linting
Latest commit 5e71f8d Oct 23, 2018
Permalink
Failed to load latest commit information.
.github Add github issue and PR templates (#822) Aug 15, 2018
docs Added linting of markdown code blocks (#898) Oct 23, 2018
flow-typed Use CSSTOM in default unit plugin (#893) Oct 17, 2018
packages Added linting of markdown code blocks (#898) Oct 23, 2018
scripts Migrate to yarn (#858) Sep 16, 2018
.babelrc Moved react-jss into monorepo (#785) Jul 30, 2018
.bithoundrc add react-jss to the test suite Sep 25, 2016
.eslintignore Generate cjs and umd flat bundles (#773) Jul 16, 2018
.eslintrc.js Added linting of markdown code blocks (#898) Oct 23, 2018
.flowconfig Simplify flow distribution (#717) May 20, 2018
.gitattributes Treat package-lock.json like binary Jan 26, 2018
.gitignore Use pascal case for global namespace (#873) Oct 1, 2018
.nvmrc Added .nvmrc (#896) Oct 17, 2018
.prettierignore Generate cjs and umd flat bundles (#773) Jul 16, 2018
.prettierrc increase printWidth Feb 7, 2018
.travis.yml Added linting of markdown code blocks (#898) Oct 23, 2018
LICENSE update license Jul 5, 2018
browsers.json add edge browser for browserstack fixes #321 Sep 19, 2016
changelog.md Scoped keyframes (#888) Oct 22, 2018
contributing.md Update contributing.md Oct 23, 2018
karma.conf.js Dynamic values full syntax (#878) Oct 14, 2018
lerna.json Migrate to yarn (#858) Sep 16, 2018
package.json Added linting of markdown code blocks (#898) Oct 23, 2018
readme.md add glamor-jss to the integrations list Jul 6, 2018
rollup.config.js Use pascal case for global namespace (#873) Oct 1, 2018
tests.webpack.js lint configs May 20, 2016
webpack.config.js - Removed observable code from jss Jul 13, 2018
yarn.lock Added linting of markdown code blocks (#898) Oct 23, 2018

readme.md

JSS

Gitter Build Status codecov OpenCollective OpenCollective

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

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

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]

Sponsors

Chatgrape

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