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.
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>
}
}
Use npm to install the package:
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 ] });
require('modcss').register(/* stylusPaths, useNib */)
const myComponentStylesAsJSON = require('../styl/components.styl')
// Use require('modcss').deregister() to remove the association with CSS & Stylus files
Example config:
module.exports = {
output: {
path: './output/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.styl$/,
loader: '../index.js?paths[]=./mixins&nib=true',
exclude: /node_modules/
}
]
}
};
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4