sprayer

CSS in JS with Style

npm install --save-dev sprayer

Sprayer allows you to write modular, scoped CSS with all the features of JavaScript template strings. It is heavily influenced by CSS Modules, styled-components and CSJS.

Features

• Write your styles with the syntax you already know
• Automatically Scoped: No need to worry about duplicate class names
• Tooling free: You only need an ES2015 environment
• Small: Only ~10KB minified and gzipped
• Framework-agnostic (helpers for React exists)
• Dynamic styles: Write you CSS once and change it with parameters over and over

Coming soon

• Server rendered JavaScript support
• Linting with StyleLint
• Autoprefix, PostCSS, SASS, Styles and LESS support via a babel-plugin
• Syntax highlighting

Missing something?

Create an issue 👍

Example

import $ from 'jquery'
import sprayer from 'sprayer'

// Create a spray
const spray = sprayer`
	.headline {
		color: darkcyan;
		font-size: ${(fontSize) => fontSize}rem;
		/*           ^^^^^^^^^^^^^^^^^^^^^^                                                   */
		/* This interpolation will be called with the arguments passed to the spray           */
		/* In this example it will be called with 3 for the h1 and with 2 for the h2 elements */
	}
`

$('h1').addClass(spray(3).headline)
$('h2').addClass(spray(2).headline)

import sprayer from 'sprayer'

const spray = sprayer`
  .navigation-bar {
    height: 32px
  }
`

const classes = spray()
// Classes are automatically camelCased. You can now use both classes.navigationBar and classes['navigation-bar'].

API

import sprayer from 'sprayer'

The whole API is one single function. You should tag your template string with this function to get a spray. A spray is a function which will take a list of parameters. If you have interpolations in your template string which are functions they will be called with the parameters you supplied to the spray. After you called the spray it will hash the CSS, scope all classes with this hash and then return you an object which will have all classes and their scoped counterparts as keys and values. You can then use this object to inject the classes into the DOM. In the background sprayer already injected the styles into the DOM. There will be a special method called .dispose() in the object. You should call this method if you don't need the style anymore.

Want to help?

I would highly appreciate if you want to help me with this project. Check out the issues with the help wanted label to see where your help is needed.