Skip to content

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

License

Notifications You must be signed in to change notification settings

jameswomack/modcss

 
 

Repository files navigation

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

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 90.7%
  • Makefile 6.4%
  • CSS 2.9%