0.0.3 • Published 10 years ago
js-css-loader v0.0.3
js css loader for webpack
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.