jss-loader's Introduction

JSS Loader for Webpack

WARNING: This project is still experimental and not yet ready for production.

Use JavaScript as your CSS preprocessor!

Dynamically create CSS by executing JavaScript at build time. Export your styles in the JSS format and they'll be converted into regular CSS.

Install

$ npm install --save jss-loader jss

Usage

Simply export an object of styles from your JavaScript file:

module.exports = {
  '.hello': {
    color: 'blue'
  },
  '.world': {
    color: 'green'
  }
};

This loader is designed to export global CSS selectors, so it's recommended to use this loader in tandem with CSS Modules via css-loader to create locally scoped class names.

var styles = require('css?modules!jss./component.jss.js');

var html = '<div class="' + styles.hello + '">Hello World!</div>';

JSS Plugins

In order to use JSS plugins, simply define the jssLoader.plugins option in your Webpack config.

module.exports = {
  module: {
    loaders: [...]
  },
  jssLoader:
    plugins: [
      require('jss-nested'),
      require('jss-extend'),
      require('jss-vendor-prefixer'),
      require('jss-camel-case'),
      require('jss-props-sort'),
      require('jss-px')
    ]
};

If required, you can change the options key with the config query parameter: "css!jss?config=jssLoaderCustom".

External Documentation

JSS

Webpack: Using loaders

Thanks

Oleg Slobodskoi for writing JSS. What an awesome project. I'm so glad I found a way that CSS Modules and JSS could be friends at last.
Andrey Popp for creating Styling, the main influence for this project.
Tobias Koppers for writing val-loader, which served as the foundation of this loader. Oh, and for writing Webpack.