| 1 | # JSS
|
| 2 |
|
| 3 | [](https://gitter.im/cssinjs/lobby)
|
| 4 | [](https://travis-ci.org/cssinjs/jss)
|
| 5 | [](https://codecov.io/gh/cssinjs/jss)
|
| 6 | [](https://www.bithound.io/cssinjs/jss)
|
| 7 | [](#backers)
|
| 8 | [](#sponsors)
|
| 9 |
|
| 10 | [JSS is a more powerful abstraction](https://medium.com/@oleg008/jss-is-css-d7d41400b635) over CSS. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It is a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) 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](./docs/plugins.md) API.
|
| 11 |
|
| 12 | Feel free to ask any JSS related questions on twitter by using hashtag `#cssinjs` and mentioning [@oleg008](https://twitter.com/oleg008), [watch my latest talk](https://www.youtube.com/watch?v=i3TIrcnMIng) about "Unique Value Proposition of CSSinJS" and try it on a [playground](https://codesandbox.io/s/z21lpmvv33).
|
| 13 |
|
| 14 | ## Integrations
|
| 15 |
|
| 16 | * [React-JSS](https://github.com/cssinjs/react-jss) - HOC interface for React with theming, try it on [playground](https://codesandbox.io/s/j3l06yyqpw).
|
| 17 | * [Styled-JSS](https://github.com/cssinjs/styled-jss) - styled components interface for React, try it on [playground](https://codesandbox.io/s/xl89zx8zz4).
|
| 18 | * [Aphrodite-JSS](https://github.com/cssinjs/aphrodite-jss) - aphrodite like API.
|
| 19 |
|
| 20 | ## TOC
|
| 21 |
|
| 22 | 1. [Live examples](https://github.com/cssinjs/examples)
|
| 23 | 1. [Benefits](./docs/benefits.md)
|
| 24 | 1. [Setup](./docs/setup.md)
|
| 25 | 1. [JSON API (JSS Syntax)](./docs/json-api.md)
|
| 26 | 1. [JavaScript API](./docs/js-api.md)
|
| 27 | 1. [Server-side rendering](./docs/ssr.md)
|
| 28 | 1. [Performance](./docs/performance.md)
|
| 29 | 1. [Plugins API](./docs/plugins.md)
|
| 30 | 1. [Official plugins](https://github.com/cssinjs?q=plugin)
|
| 31 | 1. [All related projects](./docs/projects.md)
|
| 32 | 1. [CLI Converter](https://github.com/cssinjs/cli)
|
| 33 | 1. [Contributing](./contributing.md)
|
| 34 |
|
| 35 | ## Example
|
| 36 |
|
| 37 | Try it out on [playground](https://codesandbox.io/s/z21lpmvv33).
|
| 38 | You need to [setup plugins](./docs/setup.md#setup-with-plugins) before.
|
| 39 | You can use a [preset](https://github.com/cssinjs/jss-preset-default) for a quick setup with default plugins.
|
| 40 |
|
| 41 | ```javascript
|
| 42 | import jss from 'jss'
|
| 43 | import preset from 'jss-preset-default'
|
| 44 | import color from 'color'
|
| 45 |
|
| 46 | // One time setup with default plugins and settings.
|
| 47 | jss.setup(preset())
|
| 48 |
|
| 49 | const styles = {
|
| 50 | button: {
|
| 51 | fontSize: 12,
|
| 52 | '&:hover': {
|
| 53 | background: 'blue'
|
| 54 | }
|
| 55 | },
|
| 56 | ctaButton: {
|
| 57 | extend: 'button',
|
| 58 | '&:hover': {
|
| 59 | background: color('blue')
|
| 60 | .darken(0.3)
|
| 61 | .hex()
|
| 62 | }
|
| 63 | },
|
| 64 | '@media (min-width: 1024px)': {
|
| 65 | button: {
|
| 66 | width: 200
|
| 67 | }
|
| 68 | }
|
| 69 | }
|
| 70 |
|
| 71 | const {classes} = jss.createStyleSheet(styles).attach()
|
| 72 |
|
| 73 | document.body.innerHTML = `
|
| 74 | <button class="${classes.button}">Button</button>
|
| 75 | <button class="${classes.ctaButton}">CTA Button</button>
|
| 76 | `
|
| 77 | ```
|
| 78 |
|
| 79 | Result
|
| 80 |
|
| 81 | ```html
|
| 82 | <head>
|
| 83 | <style type="text/css">
|
| 84 | .button-123456 {
|
| 85 | font-size: 12px;
|
| 86 | }
|
| 87 | .button-123456:hover {
|
| 88 | background: blue;
|
| 89 | }
|
| 90 | .ctaButton-789012 {
|
| 91 | font-size: 12px;
|
| 92 | }
|
| 93 | .ctaButton-789012:hover {
|
| 94 | background: red;
|
| 95 | }
|
| 96 | @media (min-width: 1024px) {
|
| 97 | .button-123456 {
|
| 98 | min-width: 200px;
|
| 99 | }
|
| 100 | }
|
| 101 | </style>
|
| 102 | </head>
|
| 103 | <body>
|
| 104 | <button class="button-123456">Button</button>
|
| 105 | <button class="ctaButton-789012">CTA Button</button>
|
| 106 | </body>
|
| 107 | ```
|
| 108 |
|
| 109 | ## When should I use it?
|
| 110 |
|
| 111 | * You build a JavaScript heavy application.
|
| 112 | * You use components based architecture.
|
| 113 | * You build a reusable UI library.
|
| 114 | * You need a collision free CSS (external content, third-party UI components ...).
|
| 115 | * You need code sharing between js and css.
|
| 116 | * Minimal download size is important to you.
|
| 117 | * Robustness and code reuse is important to you.
|
| 118 | * Ease of maintenance is important to you.
|
| 119 | * You just want to use any of its [benefits](./docs/benefits.md)
|
| 120 |
|
| 121 | ## Roadmap
|
| 122 |
|
| 123 | * ~~Make it easier for newcomers to setup jss with plugins (like presets).~~
|
| 124 | * ~~Make JSON DSL even better, for e.g. [jss-expand](https://github.com/typical000/jss-expand).~~
|
| 125 | * ~~Make it easy to see when changes in the core break plugins (integrate plugins test suite).~~
|
| 126 | * ~~Make community create plugins (better plugins API documentation, infrastructure).~~
|
| 127 | * ~~Introduce a way for theming with react-jss~~
|
| 128 | * Help release [material-ui](https://github.com/callemall/material-ui/tree/v1-alpha) alpha version.
|
| 129 | * Use [ISTF](https://github.com/cssinjs/istf-spec)
|
| 130 | * Better React Native support.
|
| 131 | * Stylelint integration #490.
|
| 132 | * Source maps #469
|
| 133 | * Flow and typescript typings for the JSON DSL #375 #361
|
| 134 | * Do more benchmarking, include plugins, always track perf regressions.
|
| 135 | * Make SSR even better (vendor prefixer server-side, smaller critical CSS)
|
| 136 | * Make CLI tool better: allow integration of styles written in various preprocessing languages as well as pure css #166
|
| 137 |
|
| 138 | ## Browsers Support
|
| 139 |
|
| 140 | We have automated tests running in [real browsers](./browsers.json).
|
| 141 |
|
| 142 | ## License
|
| 143 |
|
| 144 | MIT
|
| 145 |
|
| 146 | ## Thanks
|
| 147 |
|
| 148 | Thanks to [BrowserStack](https://www.browserstack.com) for providing the infrastructure that allows us to run our tests in real browsers and to all awesome [contributors](https://github.com/cssinjs/jss/graphs/contributors).
|
| 149 |
|
| 150 | <a href="https://www.browserstack.com" target="_blank"><img src="https://www.browserstack.com/images/layout/logo.svg"></a>
|
| 151 |
|
| 152 | ### Backers
|
| 153 |
|
| 154 | Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/jss#backer)]
|
| 155 |
|
| 156 | <a href="https://opencollective.com/jss/backer/0/website" target="_blank"><img src="https://opencollective.com/jss/backer/0/avatar.svg"></a>
|
| 157 | <a href="https://opencollective.com/jss/backer/1/website" target="_blank"><img src="https://opencollective.com/jss/backer/1/avatar.svg"></a>
|
| 158 | <a href="https://opencollective.com/jss/backer/2/website" target="_blank"><img src="https://opencollective.com/jss/backer/2/avatar.svg"></a>
|
| 159 | <a href="https://opencollective.com/jss/backer/3/website" target="_blank"><img src="https://opencollective.com/jss/backer/3/avatar.svg"></a>
|
| 160 | <a href="https://opencollective.com/jss/backer/4/website" target="_blank"><img src="https://opencollective.com/jss/backer/4/avatar.svg"></a>
|
| 161 | <a href="https://opencollective.com/jss/backer/5/website" target="_blank"><img src="https://opencollective.com/jss/backer/5/avatar.svg"></a>
|
| 162 | <a href="https://opencollective.com/jss/backer/6/website" target="_blank"><img src="https://opencollective.com/jss/backer/6/avatar.svg"></a>
|
| 163 | <a href="https://opencollective.com/jss/backer/7/website" target="_blank"><img src="https://opencollective.com/jss/backer/7/avatar.svg"></a>
|
| 164 | <a href="https://opencollective.com/jss/backer/8/website" target="_blank"><img src="https://opencollective.com/jss/backer/8/avatar.svg"></a>
|
| 165 | <a href="https://opencollective.com/jss/backer/9/website" target="_blank"><img src="https://opencollective.com/jss/backer/9/avatar.svg"></a>
|
| 166 | <a href="https://opencollective.com/jss/backer/10/website" target="_blank"><img src="https://opencollective.com/jss/backer/10/avatar.svg"></a>
|
| 167 | <a href="https://opencollective.com/jss/backer/11/website" target="_blank"><img src="https://opencollective.com/jss/backer/11/avatar.svg"></a>
|
| 168 | <a href="https://opencollective.com/jss/backer/12/website" target="_blank"><img src="https://opencollective.com/jss/backer/12/avatar.svg"></a>
|
| 169 | <a href="https://opencollective.com/jss/backer/13/website" target="_blank"><img src="https://opencollective.com/jss/backer/13/avatar.svg"></a>
|
| 170 | <a href="https://opencollective.com/jss/backer/14/website" target="_blank"><img src="https://opencollective.com/jss/backer/14/avatar.svg"></a>
|
| 171 | <a href="https://opencollective.com/jss/backer/15/website" target="_blank"><img src="https://opencollective.com/jss/backer/15/avatar.svg"></a>
|
| 172 | <a href="https://opencollective.com/jss/backer/16/website" target="_blank"><img src="https://opencollective.com/jss/backer/16/avatar.svg"></a>
|
| 173 | <a href="https://opencollective.com/jss/backer/17/website" target="_blank"><img src="https://opencollective.com/jss/backer/17/avatar.svg"></a>
|
| 174 | <a href="https://opencollective.com/jss/backer/18/website" target="_blank"><img src="https://opencollective.com/jss/backer/18/avatar.svg"></a>
|
| 175 | <a href="https://opencollective.com/jss/backer/19/website" target="_blank"><img src="https://opencollective.com/jss/backer/19/avatar.svg"></a>
|
| 176 | <a href="https://opencollective.com/jss/backer/20/website" target="_blank"><img src="https://opencollective.com/jss/backer/20/avatar.svg"></a>
|
| 177 | <a href="https://opencollective.com/jss/backer/21/website" target="_blank"><img src="https://opencollective.com/jss/backer/21/avatar.svg"></a>
|
| 178 | <a href="https://opencollective.com/jss/backer/22/website" target="_blank"><img src="https://opencollective.com/jss/backer/22/avatar.svg"></a>
|
| 179 | <a href="https://opencollective.com/jss/backer/23/website" target="_blank"><img src="https://opencollective.com/jss/backer/23/avatar.svg"></a>
|
| 180 | <a href="https://opencollective.com/jss/backer/24/website" target="_blank"><img src="https://opencollective.com/jss/backer/24/avatar.svg"></a>
|
| 181 | <a href="https://opencollective.com/jss/backer/25/website" target="_blank"><img src="https://opencollective.com/jss/backer/25/avatar.svg"></a>
|
| 182 | <a href="https://opencollective.com/jss/backer/26/website" target="_blank"><img src="https://opencollective.com/jss/backer/26/avatar.svg"></a>
|
| 183 | <a href="https://opencollective.com/jss/backer/27/website" target="_blank"><img src="https://opencollective.com/jss/backer/27/avatar.svg"></a>
|
| 184 | <a href="https://opencollective.com/jss/backer/28/website" target="_blank"><img src="https://opencollective.com/jss/backer/28/avatar.svg"></a>
|
| 185 | <a href="https://opencollective.com/jss/backer/29/website" target="_blank"><img src="https://opencollective.com/jss/backer/29/avatar.svg"></a>
|
| 186 |
|
| 187 | ### Sponsors
|
| 188 |
|
| 189 | [](https://www.chatgrape.com/)
|
| 190 |
|
| 191 | Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/jss#sponsor)]
|
| 192 |
|
| 193 | <a href="https://opencollective.com/jss/sponsor/0/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/0/avatar.svg"></a>
|
| 194 | <a href="https://opencollective.com/jss/sponsor/1/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/1/avatar.svg"></a>
|
| 195 | <a href="https://opencollective.com/jss/sponsor/2/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/2/avatar.svg"></a>
|
| 196 | <a href="https://opencollective.com/jss/sponsor/3/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/3/avatar.svg"></a>
|
| 197 | <a href="https://opencollective.com/jss/sponsor/4/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/4/avatar.svg"></a>
|
| 198 | <a href="https://opencollective.com/jss/sponsor/5/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/5/avatar.svg"></a>
|
| 199 | <a href="https://opencollective.com/jss/sponsor/6/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/6/avatar.svg"></a>
|
| 200 | <a href="https://opencollective.com/jss/sponsor/7/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/7/avatar.svg"></a>
|
| 201 | <a href="https://opencollective.com/jss/sponsor/8/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/8/avatar.svg"></a>
|
| 202 | <a href="https://opencollective.com/jss/sponsor/9/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/9/avatar.svg"></a>
|
| 203 | <a href="https://opencollective.com/jss/sponsor/10/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/10/avatar.svg"></a>
|
| 204 | <a href="https://opencollective.com/jss/sponsor/11/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/11/avatar.svg"></a>
|
| 205 | <a href="https://opencollective.com/jss/sponsor/12/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/12/avatar.svg"></a>
|
| 206 | <a href="https://opencollective.com/jss/sponsor/13/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/13/avatar.svg"></a>
|
| 207 | <a href="https://opencollective.com/jss/sponsor/14/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/14/avatar.svg"></a>
|
| 208 | <a href="https://opencollective.com/jss/sponsor/15/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/15/avatar.svg"></a>
|
| 209 | <a href="https://opencollective.com/jss/sponsor/16/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/16/avatar.svg"></a>
|
| 210 | <a href="https://opencollective.com/jss/sponsor/17/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/17/avatar.svg"></a>
|
| 211 | <a href="https://opencollective.com/jss/sponsor/18/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/18/avatar.svg"></a>
|
| 212 | <a href="https://opencollective.com/jss/sponsor/19/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/19/avatar.svg"></a>
|
| 213 | <a href="https://opencollective.com/jss/sponsor/20/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/20/avatar.svg"></a>
|
| 214 | <a href="https://opencollective.com/jss/sponsor/21/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/21/avatar.svg"></a>
|
| 215 | <a href="https://opencollective.com/jss/sponsor/22/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/22/avatar.svg"></a>
|
| 216 | <a href="https://opencollective.com/jss/sponsor/23/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/23/avatar.svg"></a>
|
| 217 | <a href="https://opencollective.com/jss/sponsor/24/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/24/avatar.svg"></a>
|
| 218 | <a href="https://opencollective.com/jss/sponsor/25/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/25/avatar.svg"></a>
|
| 219 | <a href="https://opencollective.com/jss/sponsor/26/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/26/avatar.svg"></a>
|
| 220 | <a href="https://opencollective.com/jss/sponsor/27/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/27/avatar.svg"></a>
|
| 221 | <a href="https://opencollective.com/jss/sponsor/28/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/28/avatar.svg"></a>
|
| 222 | <a href="https://opencollective.com/jss/sponsor/29/website" target="_blank"><img src="https://opencollective.com/jss/sponsor/29/avatar.svg"></a>
|