Define CSS in JS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

js css loader for webpack



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


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.

// 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.