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.
- React-JSS - HOC interface for React with theming, try it on webpackbin.
- Styled-JSS - styled components interface for React, try it on webpackbin.
- Aphrodite-JSS - aphrodite like API.
- Live examples.
- Benefits
- Setup
- JSON API (JSS Syntax)
- JavaScript API
- Server-side rendering
- Performance
- Plugins API
- Official plugins
- All related projects
- CLI Converter
- Contributing
Try it out on webpackbin. 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>- 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
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).Introduce a way for theming with react-jss- Help release material-ui alpha version.
- Use ISTF
- Better React Native support.
- Stylelint integration #490.
- Source maps #469
- Flow and typescript typings for the JSON DSL #375 #361
- Do more benchmarking, include plugins, always track perf regressions.
- Make SSR even better (vendor prefixer server-side, smaller critical CSS)
- Make CLI tool better: allow integration of styles written in various preprocessing languages as well as pure css #166
We have automated tests running in real browsers.
MIT
Thanks to BrowserStack for providing the infrastructure that allows us to run our tests in real browsers and to all awesome contributors.
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent