Skip to content
master
Switch branches/tags
Code
This branch is 33 commits ahead of andreypopp:master.
Contribute
Fetch upstream

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

ModCSS

ModCSS

Build Status

ModCSS is a Node.js require extension, Browserify|DCompose transform & Webpack loader that converts CSS or Stylus into JSON. This can be used further by libraries like React to assign styles to UI components.

The main use case (as of this writing) is to write your styles using expressive Stylus syntax and isolate them to a single component, usually by assigning JSON to a React component.

TODO

  • Provide a running GH Pages example site

Example

styles.styl:

MyComponent
  font-size 12px
  background-color red

my-component.js:

const React = require('react')
const Styles = require('./styles.styl') // or ./styles.css

class MyComponent extends React.Component {
  render () {
    return <div style={Styles.MyComponent}>
      Hello, world!
    </div>
  }
}

Usage

Browserify

Use npm to install the package:

% npm install modcss -SE

And use it with browserify:

% browserify -t [ modcss --paths somePathHere --nib true ] ./my-component.js

where ./my-component.js or its dependencies can reference *.css or *.styl files by require(...) calls.

Or programmatically with browserify (for instance, via gulp):

var browserify = require('browserify');
var modcss = require('modcss');

// in your task
var b = browserify(config);
b.transform(modcss, { paths: [ somePathHere ] });

Node.js

require('modcss').register(/* stylusPaths, useNib */)

const myComponentStylesAsJSON = require('../styl/components.styl')

// Use require('modcss').deregister() to remove the association with CSS & Stylus files

Webpack

Example config:

module.exports = {
  output: {
    path: './output/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.styl$/,
        loader: '../index.js?paths[]=./mixins&nib=true',
        exclude: /node_modules/
      }
    ]
  }
};

History

ModCSS is based on the abandoned project cssobjectify. Issues went unanswered, the tests didn't pass, etc. I've also added Stylus support to this module, whether used from Node.js or Browserify.

About

A Node.js require extension and Browserify transform to turn CSS or Stylus into JSON for React components

Resources

License

Packages

No packages published