css-in-js

   

css-in-js

Write stylesheets in JS.
Works with any stack.

There are many ways of writing styles as JS (Free Style, restyle and babel-plugin-css-in-js – just to name a few). But none of them has the option to compile to a good old interoperable CSS stylesheet, or the new and shiny CSS module. I wanted an easy way to take advantage of JS goodness when writing stylesheets – a way compatible with any tech stack.

 

Installation

npm install [--save] css-in-js

 

Usage

const cssInJs = require('css-in-js');

const indigo = '#3F51B5';

▸ cssInJs({
    '.my-button': {
      'width': '50px',
      'background-color': indigo,
    },

    '@media screen and (min-width: 80em)': {
      '.my-button': {
        'width': '100%',
      },
    },
  });
◂ `
  .my-button {
    width: 50px;
    background-color: #3F51B5;
  }

  @media screen and (min-width: 80em) {
    .my-button {
      width: 100%;
    }
  }
  `

 

Syntax

Any JS object is translated recursively to a CSS tree. To ensure two-way compatibility, we only support git.io/orthodox style objects.

Fallbacks

When using fancy things which need a CSS fallback, you might want to set the same property more than once:

.drag-me {
  cursor: pointer;
  cursor: -webkit-grab;
  cursor: grab;
}

To cover these cases, we allow passing an array of style objects:

▸ cssInJs({
    '.drag-me': [{
      cursor: 'pointer',
    }, {
      cursor: '-webkit-grab',
    }, {
      cursor: 'grab',
    }],
  });
◂ `
  .drag-me {
    cursor: pointer;
    cursor: -webkit-grab;
    cursor: grab;
  }
  `

 

Credits

css-in-js is heavily inspired by the great elm-css by Richard Feldman. The name is inspired by the disrupting React talk CSS in JS by Christopher Chedeau.

 

License

MIT © Tomek Wiszniewski