Skip to content
A Node.js require extension and Browserify transform to turn CSS or Stylus into JSON for React components
Branch: master
Clone or download
Pull request Compare This branch is 33 commits ahead of andreypopp:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
specs
.babelrc
.eslintrc
.gitignore
.jscsrc
.jshintrc
.tern-project
.travis.yml
CHANGELOG.md
LICENSE
Makefile
README.md
index.js
package.json

README.md

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.

You can’t perform that action at this time.