reubn / dragonfruit

Syntactic Sugar Over Namespaced CSS

dragonfruit

Webpack Loader for Syntactic Sugar Over Namespaced CSS

Installation

npm install dragonfruit --save-dev

e.g.

CSS

.datepicker
      {
        display: block;
        color: black;
      }

JS

var React = require("react");
var styles = require("./datepicker.css");

module.exports = React.createClass({
  render: function() {
    return
      <div className={styles("datepicker")}>
       // This ^^ will contain a random namespaced hash that corresponds with the css class ".datepicker"
      </div>
  }
});

Would Be Transformed To

.kg64jk3l
      {
        display: block;
        color: black;
      }

var React = require("react");
var styles = require("./datepicker.css");

module.exports = React.createClass({
  render: function() {
    return
      <div className="kg64jk3l">
      </div>
  }
});

Usage

In your webpack.config.js:

module.exports = {
    ...
    module: {
        loaders: [
            {test: /\.css$/, loader: "dragonfruit!style!css?modules=true"}
        ]
    }
    ...
};

From API:

Any Strings, Objects, Functions, Arrays, Nested Arrays, etc. of classNames

e.g.

var styles = require("./datepicker.css");

styles("day")                                                                       -> "hr486_eio"
styles(["day"])                                                                     -> "hr486_eio"
styles([["day"]])                                                                   -> "hr486_eio"
styles({"day":true})                                                                -> "hr486_eio"
styles(function(classNamesAvailable){return "day"})                                 -> "hr486_eio"
styles(function(classNamesAvailable){return [{"day":true}]})                        -> "hr486_eio"

styles("day week")                                                                  -> "hr486_eio iooi676_5hj"
styles("day", "week")                                                               -> "hr486_eio iooi676_5hj"
styles(["day", "week"])                                                             -> "hr486_eio iooi676_5hj"
styles([["day",[[, "week"]]]])                                                      -> "hr486_eio iooi676_5hj"
styles({"day":true, "week":true, month:false})                                      -> "hr486_eio iooi676_5hj"
styles(function(classNamesAvailable){return ["day", {"week": true, month:false}]})  -> "hr486_eio iooi676_5hj"