jess

Note: This project is in alpha. Expect (and report) bugs!

Jess

JavaScript Evaluated Style Sheets, from the people who brought you Less.

Why Jess?

• Jess does what Sass and Less do, only faster (and does some things they can't).
• Jess does what CSS-in-JS does, only it keeps your CSS in stylesheets.
• Jess does what CSS Modules does, but more dynamically.
• Jess does whatever JavaScript can do, because it transpiles to JavaScript under-the-hood.

You can think of Jess as a middle-ground between Less/Sass and CSS-in-JS. It keeps your styles in stylesheets, but it's equally dynamic. Jess is CSS-in-JS for people who don't like CSS in their JS.

For more information, see the docs.

P.S. Why is the logo inspired by a hawk?

A "jess" is defined as "a short leather strap that is fastened around each leg of a hawk...".

Usage

yarn install jess
npm install jess

To compile a .jess file into CSS:

jess file.jess

Features

Variables

@let myWidth: 3px;

.box {
  width: $myWidth;
}

Import from JS

@import { constants } from './constants.js';

.box {
  width: $(constants.WIDTH + 10)px;
}

Import from Jess

@import { myWidth } from './stylesheet.jess';

.box {
  width: $myWidth;
}

Include other stylesheets

@import styles from './stylesheet.jess';
@include styles();

Mixins

@mixin square(size) {
  width: $size;
  height: $size;
}

.box {
  @include square(50px);
}

Exporting from Jess

In progress, requires the (unfinished) Rollup or Webpack plugin.

import styles, { square } from './styles.jess'
const css = styles()

export const myComponent = props => {
  return <div className={css.box} style={square(props.size).obj()}>Component</div>
}

Contributing

As this is a WIP, file issues with your ideas/concerns/wants!