Define CSS in JS
JavaScript
Switch branches/tags
Nothing to show
Latest commit c9eec0b Dec 13, 2015 @petehunt Update README.md
Permalink
Failed to load latest commit information.
.gitignore Initial commit Apr 7, 2012
.npmignore version 0.2: support url(...) require with loader May 13, 2012
.travis.yml more usefull, better tests Feb 10, 2013
README.md
index.js Force node to reload source file May 8, 2014
package.json version bump Jun 8, 2014

README.md

js css loader for webpack

unmaintained

Problem

Sharing values between JS and CSS is hard, and CSS preprocessors kind of suck.

Usage

Define styles like this (uses React CSS conventions):

module.exports = {
  '.topMarginSmall': {
    marginTop: require('./constants').SMALL_UNIT
  },
  '@media (max-width: 600px)': {
    '.topMarginSmall': {
      marginTop: 2
    }
  }
};

This will require() the file at build time (so you get the full power of JS. _.extend() for SASS-style mixins etc) and look at the exports to create CSS that looks like this:

.topMarginSmall {
  margin-top: 5px;
}

Use it like this:

// You can use webpack.config.js to get rid of all the !loader stuff.
require("style!css!js-css!./file.css.js");

// Stylesheet now available with topMarginSmall class name

NOTE: for fast build times you should keep the dep graphs of these modules small. Maybe they are only allowed to require() modules with .style.js in the name, and those modules are only allowed to require() other .style.js modules.